ReactNative實現(xiàn)圖片上傳功能的示例代碼
最近在學(xué)習(xí)ReactNative，ReactNative可以基于目前大熱的開源JavaScript庫React.js來開發(fā)iOS和Android原生App，今天就學(xué)習(xí)一下ReactNative實現(xiàn)圖片上傳功能
在查看ReactNative的官方文檔的時候，你會發(fā)現(xiàn)其實Fackbook是沒有提供圖片上傳功能的。
如果我們的項目里需要使用圖片上傳（用js 實現(xiàn)圖片上傳），那我們有沒有什么辦法呢？
通過搜索React-native的github， 會發(fā)現(xiàn)里面有這么一篇文章：https://github.com/facebook/react-native/issues/5308
解決方案：
采用FormData來實現(xiàn)，F(xiàn)ormData 的API參考：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
利用FormData對象,你可以使用一系列的鍵值對來模擬一個完整的表單,然后使用XMLHttpRequest發(fā)送這個"表單".
那么我們就來看看在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、創(chuàng)建一個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、設(shè)置header
'Content-Type':'multipart/form-data',
4、將創(chuàng)建好的FormData賦值給body
這樣我們就完成了圖片上傳的功能。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React組件中的this的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
React Native 可以開發(fā) ios 和 android 的 app，在開發(fā)過程中，勢必會遇上屏幕適配，這篇文章主要介紹了詳解React Native 屏幕適配（炒雞簡單的方法），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了react寫一個select組件的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
使用VScode 插件debugger for chrome 調(diào)試react源碼的方法
這篇文章主要介紹了使用VScode 插件debugger for chrome 調(diào)試react源碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
在React頁面重新加載時保留數(shù)據(jù)的實現(xiàn)方法總結(jié)
在React頁面重新加載時保留數(shù)據(jù),可以通過多種方法來實現(xiàn),常見的方法包括使用瀏覽器的本地存儲（Local Storage 或 Session Storage）、URL參數(shù)、以及服務(wù)器端存儲等,本文給大家總結(jié)了一些具體實現(xiàn)方法,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了在React項目中使用Eslint代碼檢查工具及常見問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
本篇文章主要介紹了react-router實現(xiàn)按需加載，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
用React實現(xiàn)一個類 chatGPT 的交互式問答組件的方法詳解
這篇文章主要給大家詳細(xì)介紹如何用React實現(xiàn)一個類 chatGPT 的交互式問答組件的方法，文中有詳細(xì)的代碼示例，對我們學(xué)習(xí)有一定的幫助,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了react 應(yīng)用多入口配置及實踐總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
React18的useEffect執(zhí)行兩次如何應(yīng)對
這篇文章主要給大家介紹了關(guān)于React18的useEffect執(zhí)行兩次如何應(yīng)對的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用React具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07