1. 程式人生 > >《React-Native系列》26、 ReactNative實現圖片上傳功能

《React-Native系列》26、 ReactNative實現圖片上傳功能

在檢視ReactNative的官方文件的時候,你會發現其實Fackbook是沒有提供圖片上傳功能的。

如果我們的專案裡需要使用圖片上傳(用JS 實現圖片上傳),那我們有沒有什麼辦法呢?

解決方案:

利用FormData物件,你可以使用一系列的鍵值對來模擬一個完整的表單,然後使用XMLHttpRequest傳送這個"表單".

那麼我們就來看看在RN裡怎麼做,貼程式碼:

  uploadImage(){
    let formData = new FormData();
    let file = {uri: uri, type: 'multipart/form-data', name: 'a.jpg'};

    formData.append("images",file);

    fetch(url,{
      method:'POST',
      headers:{
      	'Content-Type':'multipart/form-data',
      },
      body:formData,
    })
    .then((response) => response.text() )
    .then((responseData)=>{

      console.log('responseData',responseData);
    })
    .catch((error)=>{console.error('error',error)});

  }
}

1、首先我們new了一個FormData

2、建立一個file物件,uri是什麼?如下示例:

android:  file:///storage/emulated/0/Pictures/eb645893-4c00-44a3-a9b4-a2116e955f7c.jpg
ios:         /Users/ashleydw/Library/Developer/CoreSimulator/Devices/23EE88D0-6E91-43AD-A3B6-06F87698C5A8/data/Containers/Data/Application/A73E68D3-7424-4301-9934-AD0F8251C1EB/tmp/7803DA8A-0E40-4FCB-A593-884805878172.jpg

3、設定header 

'Content-Type':'multipart/form-data',

4、將建立好的FormData賦值給body

這樣我們就完成了圖片上傳的功能。

相關推薦

React-Native系列26 ReactNative實現圖片功能

在檢視ReactNative的官方文件的時候,你會發現其實Fackbook是沒有提供圖片上傳功能的。如果我們的專案裡需要使用圖片上傳(用JS 實現圖片上傳),那我們有沒有什麼辦法呢?解決方案:利用FormData物件,你可以使用一系列的鍵值對來模擬一個完整的表單,然後使用XM

React Native 使用react-native-image-picker庫實現圖片功能

react-native-image-picker作為一個整合相機和相簿的功能的第三方庫,因為其使用相對簡單受到前端開發人員的喜愛。 react-native-image-picker使用 1, 首先,安裝下該外掛。 npm install rea

使用 MultipartFile 結合 (formData物件Blob物件) 實現圖片功能簡介

圖片上傳功能的具體實現(當然檔案也一樣): MultipartFile ,這個類可以完全接收到前臺傳過來的圖片資料。 MultipartFile 通過 MultipartFile .transferTo( new File()), 僅需要這步驟,就可以把圖片存到伺

系列springMVC實現檔案和跨伺服器檔案

一、實現檔案上傳 專案目錄如下所示 一、匯入依賴和配置springmvc.xml、web.xml 這個兩個jar

elementUI+koa實現圖片功能

elementUI中的上傳元件為: 大家可以先在自己的專案中執行一下餓了麼上傳元件 <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :o

CKEditor4.7之使用Java實現圖片功能

1.官網下載CKEditor,基礎包,標準包,全包選擇其一。地址:https://ckeditor.com/ckeditor-4/download/ 2.下載檔案後將其解壓至WebRoot資料夾下,解壓前可以新建一個包檔案FckEditor 3.開啟ckeditor\plugin

微信小程式實現圖片功能

前端: 微信開發者工具 後端:.Net 伺服器:阿里雲 這裡介紹微信小程式如何實現上傳圖片到自己的伺服器上 前端程式碼 data: { productInfo: {} }, //上傳圖片 uploadImage: function () { var that

java模擬表單檔案,java通過模擬post方式提交表單實現圖片功能例項

package com.zdz.httpclient;import java.io.BufferedReader;import java.io.DataInputStream;import java.io.DataOutputStream;import java.io.File;import java.io.

使用SpringMV自帶的CommonsMultipartFile實現圖片功能

說明 1.前端上傳檔案必須用表單上傳 /** * 上傳圖片 * * @param params * @return */ @RequestMapping(value = "/uploadImage"

SSM框架修改資料中實現圖片功能

第一步:當然是需要加入必要的兩個jar包 commons-fileupload-1.3.jar、commons-io-1.2.jar 或者引入依賴: <dependency> <groupId>commons-

Spring MVC 實現圖片功能

Spring MVC 實現圖片上傳   使用者必須能夠上傳圖片,因此需要檔案上傳的功能。比較常見的檔案上傳元件有Commons FileUpload(http://jakarta.apache.org/commons/fileupload/a>)和COS FileUpload(http://www.s

教你React Native使用fetch實現圖片

本篇文章主要介紹了React Native使用fetch實現圖片上傳的示例程式碼,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。 普通網路請求引數是JSON物件 圖片上傳的請求引數使用的是formData物件 使用fet

Android 7.0實現拍照獲取相簿圖片頭像功能

對網上關於Android7.0的上傳頭像進行整理 1.新增許可權管理。內容例如以下: <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-pe

分散式檔案系統FastDFS簡介搭建與SpringBoot整合實現圖片

之前大學時搭建過一個FastDFS的圖片伺服器,當時只是抱著好奇的態度搭著玩一下,當時搭建採用了一臺虛擬機器,tracker和storage服務在一臺機器上放著,最近翻之前的部落格突然想著在兩臺機器上搭建試一下,順便整合了SpringBoot實現了一下圖片的上傳服務。 新的閱讀體驗地址:http://www

PHP圖片功能實現

php file 圖片上傳 上傳圖片功能:獲取當前文件夾位置,上傳到當前文件夾下為了上傳後文件名重復導致覆蓋,上傳後更改名字為:當前時間+原文件名只允許gif、jpeg、bmg、jpg格式的文件上傳<form name="frm1" enctype="multipart/form-data"

CKEditor實現圖片,並且回調圖片路徑

js文件 文件上傳 hid class mode 兩種方法 review 重名 action CKEditor編輯器的工具欄中初始的時候應該是這樣子的,沒有圖片上傳按鈕 並且預覽中有一堆火星文,可以修改相應配置刪除它。 第一種方法:打開ckeditor/plugins/im

微信端調取相冊和攝像頭,實現圖片,並到本地服務器

配置 epic 替換 pan source 工具 alert 調試 family 在微信公眾號網頁開發時,遇到了圖片上傳的問題,查看了微信的開發者文檔,裏面的資料比較全。接著我們看一下整個的流程 1、config權限配置 $.ajax({ url:‘wx_getC

HTML5+Canvas+jQuery調用手機拍照功能實現圖片(二)

customer mkdir 狀態保存 ont false lan else if 項目 action 上一篇僅僅講到前臺操作,這篇專門涉及到Java後臺處理。前臺通過Ajax提交將Base64編碼過的圖片數據信息傳到Java後臺,然後Java這邊進行接收處理。通過

Vue2.0 引用 exif.js 實現調用攝像頭進行拍照功能以及圖片功能

[0 complete num else imp ada blob can isf vue組件代碼 <template> <div> <div style="padding:20px;"> <div cla

一個完整的springmvc + ajaxfileupload實現圖片的案例

multipart per cnblogs not his let facade func connector 一,原理 詳細原理請看這篇文章 springmvc + ajaxfileupload解決ajax不能異步上傳圖片的問題。java.lang.ClassCastEx