博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React Native上传图片
阅读量:6606 次
发布时间:2019-06-24

本文共 954 字,大约阅读时间需要 3 分钟。

RN项目需要用到上传图片功能,整理一下做个记录。

插件选择是react-native-image-picker,还挺好用的,不过需要分ios和android不同平台去配置.

可以看看之前的文章

现在给出git上的地址

当你通过react-native-image-picker得到本地图片信息时执行以下代码:

处理单张图片

let formData = new FormData();//如果需要上传多张图片,需要遍历数组,把图片的路径数组放入formData中 let file = {uri: response.uri, type: 'multipart/form-data', name: 'image.png'};   //这里的key(uri和type和name)不能改变, formData.append("files",file);   //这里的files就是后台需要的key

多张图片处理

let formData = new FormData();

for(var i = 0;i

上传

uploadURL上传图片的地址

fetch(uploadURL,{            method:'POST',            headers:{                'Content-Type':'multipart/form-data',            },            body:formData,        })            .then((response) => response.json())            .then((responseData)=>{                 let  source = ret.data.images[0].oUrl                     console.log(source)  //得到的uri(http格式)拿到后进行操作吧                          })            .catch((error)=>{console.error('error',error)});

下面是我自己应用的例子

引入模块和上传地址

clipboard.png

应用

clipboard.png

转载地址:http://rubso.baihongyu.com/

你可能感兴趣的文章
rpm安装PostgreSQL
查看>>
k sum(lintcode)
查看>>
如何部署 Calico 网络?- 每天5分钟玩转 Docker 容器技术(67)
查看>>
Android CollapsingToolbarLayout使用介绍
查看>>
Linux的七个运行级别原理概述
查看>>
28. extjs中Ext.BLANK_IMAGE_URL的作用
查看>>
[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)...
查看>>
Java内存模型
查看>>
本地apache 可以正常访问,lnmp服务器访问404错误
查看>>
Linux特殊的文件控制权限FACL
查看>>
win10 uwp 访问解决方案文件
查看>>
Linux安装mysql——源码安装
查看>>
分配的访问权限的展台应用:最佳做法
查看>>
Jquery Ajax调用asp.net后台方法
查看>>
[Android6.0][RK3399] 双屏异显代码实现流程分析(二)【转】
查看>>
DOS命令 学习笔记
查看>>
如何通过Node.js启动cesium
查看>>
Mac本地环境配置以及安装织梦CMS,增加新的坑解决办法
查看>>
[HTML]html读取本地文件并显示
查看>>
cs331n 线性分类器损失函数与最优化
查看>>