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 组件的状态下移和内容提升,通过代码讲解了渲染性能的组件问题结合实例代码给大家讲解的非常详细，需要的朋友可以参考下2022-11-11
在 React 中组件通信的数据流是单向的，顶层组件可以通过 props 属性向下层组件传递数据，而下层组件不能直接向上层组件传递数据，这篇文章主要介绍了使用react+redux实现弹出框案例,需要的朋友可以参考下2022-10-10
关于react ant 组件 Select下拉框 值回显的问题
这篇文章主要介绍了关于react ant 组件 Select下拉框 值回显的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
JavaScript的React框架中的JSX语法学习入门教程
这篇文章主要介绍了JavaScript的React框架中的JSX语法学习入门教程,React是由Facebook开发并开源的高人气js框架,需要的朋友可以参考下2016-03-03
react hooks页面实时刷新方式(setInterval)
这篇文章主要介绍了react hooks页面实时刷新方式(setInterval),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了styled-components 的性能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
React Hooks是今年最劲爆的新特性真的毫不夸张。如果你也对react感兴趣，或者正在使用react进行项目开发，请抽出点时间阅读下此文2022-03-03
这篇文章主要为大家详细介绍了如何基于React实现点击切换组件效果，文中的示例代码讲解详细，具有一定的借鉴价值，需要的小伙伴可以学习一下2023-08-08
本文主要介绍了React中使用axios发送请求的几种常用方法，主要介绍了get和post请求，具有一定的参考价值，感兴趣的可以了解一下2021-08-08
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
最近在做一个后台管理项目，涉及到react相关知识，项目需求需要在表单中带附件提交，怎么实现这个功能呢？下面小编给大家带来了react使用antd的上传组件实现文件表单一起提交功能，一起看看吧2021-06-06
最新评论