最近遇到react native中需要上傳一些圖片到后台.期間,找了一些第三方上傳插件,感覺不太好用,要么只支持一個平台,要么會對其他第三方造成影響,實在無奈.只能直接使用fetch上傳.其中上傳文件只需要圖片的絕對路徑即可,可能RN底層會幫我們把圖片轉為流傳輸
/*
*
* 上傳圖片請求
* @param
* @returns
* */
uploadImage(imgAry) {
let formData = new FormData();
//因為需要上傳多張圖片,所以需要遍歷數組,把圖片的路徑數組放入formData中
for(var i = 0;i<imgAry.length;i++){
let file = {uri: imgAry[i], type: 'multipart/form-data', name: 'image.png'}; //這里的key(uri和type和name)不能改變,
formData.append("files",file); //這里的files就是后台需要的key
}
fetch('http://192.168.0.183:8080/whale/test/upload_files',{
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)});
}
其中,關於圖片的路徑,我的是這樣的:
iOS:
file:///Users/shaotingzhou/Library/Developer/CoreSimulator/Devices/9462ED30-88C7-4318-BF83-3914B9314D34/data/Containers/Data/Application/E9A05CAF-AF07-4BA3-B2C3-C2EFBC6C2C6A/Documents/images/D5E1640B-836A-4EC9-A5C2-65B2E4E8CFE0.jpg
Android:
file:///storage/emulated/0/Pictures/image-ec0667ed-ecc5-4eed-928f-26fed6a63860.jpg
上傳成功截圖:


