您的位置:首页 > Web前端 > React

《React-Native系列》26、 ReactNative实现图片上传功能

2016-09-06 09:13 615 查看
在查看ReactNative的官方文档的时候,你会发现其实Fackbook是没有提供图片上传功能的。
如果我们的项目里需要使用图片上传(用JS 实现图片上传),那我们有没有什么办法呢?
通过搜索react-native的github, 会发现里面有这么一篇文章:https://github.com/facebook/react-native/issues/5308

解决方案:
采用FormData来实现,FormData 的API参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单".

那么我们就来看看在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了一个FormData2、创建一个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、设置header 'Content-Type':'multipart/form-data',4、将创建好的FormData赋值给body

这样我们就完成了图片上传的功能。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ReactNative FormData