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
这样我们就完成了图片上传的功能。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了React组件中的this的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
React Native 可以开发 ios 和 android 的 app，在开发过程中，势必会遇上屏幕适配，这篇文章主要介绍了详解React Native 屏幕适配（炒鸡简单的方法），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了react写一个select组件的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
使用VScode 插件debugger for chrome 调试react源码的方法
这篇文章主要介绍了使用VScode 插件debugger for chrome 调试react源码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
在React页面重新加载时保留数据,可以通过多种方法来实现,常见的方法包括使用浏览器的本地存储（Local Storage 或 Session Storage）、URL参数、以及服务器端存储等,本文给大家总结了一些具体实现方法,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了在React项目中使用Eslint代码检查工具及常见问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本篇文章主要介绍了react-router实现按需加载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
用React实现一个类 chatGPT 的交互式问答组件的方法详解
这篇文章主要给大家详细介绍如何用React实现一个类 chatGPT 的交互式问答组件的方法，文中有详细的代码示例，对我们学习有一定的帮助,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了react 应用多入口配置及实践总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要给大家介绍了关于React18的useEffect执行两次如何应对的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用React具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
最新评论