当前位置： 移动技术网 > IT编程>开发语言>JavaScript > ReactNative实现图片上传功能的示例代码

ReactNative实现图片上传功能的示例代码

2017年12月12日  | 移动技术网IT编程  | 我要评论

最近在学习reactnative，reactnative可以基于目前大热的开源javascript库react.js来开发ios和android原生app，今天就学习一下reactnative实现图片上传功能

在查看reactnative的官方文档的时候，你会发现其实fackbook是没有提供图片上传功能的。

如果我们的项目里需要使用图片上传（用js 实现图片上传），那我们有没有什么办法呢？

通过搜索react-native的github， 会发现里面有这么一篇文章：

解决方案：

采用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了一个formdata

2、创建一个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

这样我们就完成了图片上传的功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网