ReactNative实现图片上传功能的示例代码
最近在学习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
这样我们就完成了图片上传的功能。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
ReactNative实现图片上传功能的示例代码
-
node.js中实现kindEditor图片上传功能的方法教程
-
[PHP]移动端网页如何使用JqueryMobile+PHP实现上传图片的功能
-
[PHP]移动端网页如何使用JqueryMobile+PHP实现上传图片的功能
-
使用html2canvas.js实现页面截图并显示或上传的示例代码
-
php+js实现图片的上传、裁剪、预览、提交示例
-
上传图片预览JS脚本 Input file图片预览的实现示例_javascript技巧
-
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例_html5教程技巧
-
PHP实现带进度条的Ajax文件上传功能示例
-
iOS实现图片压缩的两种方法及图片压缩上传功能