React Native使用fetch实现图片上传的示例代码
本文介绍了ReactNative使用fetch实现图片上传的示例代码，分享给大家，具体如下：
普通网络请求参数是JSON对象
图片上传的请求参数使用的是formData对象
使用fetch上传图片代码封装如下：
letcommon_url='http://192.168.1.1:8080/';//服务器地址
lettoken='';//用户登陆后返回的token
/**
*使用fetch实现图片上传
*@param{string}url接口地址
*@param{JSON}paramsbody的请求参数
*@return返回Promise
*/
functionuploadImage(url,params){
returnnewPromise(function(resolve,reject){
letformData=newFormData();
for(varkeyinparams){
formData.append(key,params[key]);
}
letfile={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,
},
body:formData,
}).then((response)=>response.json())
.then((responseData)=>{
console.log('uploadImage',responseData);
resolve(responseData);
})
.catch((err)=>{
console.log('err',err);
reject(err);
});
});
}
使用方法
letparams={
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=>{
//请求失败
})
注意：由于后台服务器配置的不同，
letfile={uri:params.path,type:'application/octet-stream',name:'image.jpg'}中的type也可能是multipart/form-data
formData.append("file",file)中的的file字段也可能是images
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。