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

最近在学习ReactNative，ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App，今天就学习一下ReactNative实现图片上传功能

在查看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了一个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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。