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 Native中導(dǎo)航組件react-navigation跨tab路由處理詳解
這篇文章主要給大家介紹了關(guān)于React Native中導(dǎo)航組件react-navigation跨tab路由處理的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10react反向代理使用http-proxy-middleware問題
這篇文章主要介紹了react反向代理使用http-proxy-middleware問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07