教你React Native使用fetch實現圖片上傳
阿新 • • 發佈:2018-12-16
本篇文章主要介紹了React Native使用fetch實現圖片上傳的示例程式碼,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。
普通網路請求引數是JSON物件
圖片上傳的請求引數使用的是formData物件
使用fetch上傳圖片程式碼封裝如下:
let common_url = 'http://192.168.1.1:8080/'; //伺服器地址 let token = ''; //使用者登陸後返回的token /** * 使用fetch實現圖片上傳 * @param {string} url 介面地址 * @param {JSON} params body的請求引數 * @return 返回Promise */ function uploadImage(url,params){ return new Promise(function (resolve, reject) { let formData = new FormData(); for (var key in params){ formData.append(key, params[key]); } let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'}; formData.append("file", file); fetch(common_url + url, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data;charset=utf-8', "x-access-token": token, },//歡迎加入前端全棧開發交流圈一起學習交流:864305860 body: formData, }).then((response) => response.json()) .then((responseData)=> { console.log('uploadImage', responseData); resolve(responseData); }) .catch((err)=> { console.log('err', err); reject(err); }); }); }//歡迎加入前端全棧開發交流圈一起學習交流:864305860
使用方法
let params = { userId:'abc12345', //使用者id path:'file:///storage/emulated/0/Pictures/image.jpg' //本地檔案地址 } uploadImage('app/uploadFile',params ) .then( res=>{ //請求成功 if(res.header.statusCode == 'success'){ //這裡設定伺服器返回的header中statusCode為success時資料返回成功 upLoadImgUrl = res.body.imgurl; //伺服器返回的地址 }else{ //伺服器返回異常,設定伺服器返回的異常資訊儲存在 header.msgArray[0].desc console.log(res.header.msgArray[0].desc); } }).catch( err=>{ //請求失敗 })//歡迎加入前端全棧開發交流圈一起學習交流:864305860
注意:由於後臺伺服器配置的不同,
let file = {uri: params.path, type: ‘application/octet-stream’, name: ‘image.jpg’}中的type也可能是multipart/form-data
formData.append(“file”, file)中的的file欄位也可能是images
結語
感謝您的觀看,如有不足之處,歡迎批評指正。
本次給大家推薦一個免費的學習群,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q群:864305860,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視訊資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。