最近遇到react native中需要上传一些图片到后台.期间,找了一些第三方上传插件,感觉不太好用,要么只支持一个平台,要么会对其他第三方造成影响,实在无奈.只能直接使用fetch上传.其中上传文件只需要图片的绝对路径即可,可能RN底层会帮我们把图片转为流传输

    /*
*
* 上传图片请求
* @param
* @returns
* */ uploadImage(imgAry) {
let formData = new FormData();
//因为需要上传多张图片,所以需要遍历数组,把图片的路径数组放入formData中
for(var i = 0;i<imgAry.length;i++){
let file = {uri: imgAry[i], type: 'multipart/form-data', name: 'image.png'}; //这里的key(uri和type和name)不能改变,
formData.append("files",file); //这里的files就是后台需要的key
}
fetch('http://192.168.0.183:8080/whale/test/upload_files',{
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)});
}

 其中,关于图片的路径,我的是这样的:

iOS:

file:///Users/shaotingzhou/Library/Developer/CoreSimulator/Devices/9462ED30-88C7-4318-BF83-3914B9314D34/data/Containers/Data/Application/E9A05CAF-AF07-4BA3-B2C3-C2EFBC6C2C6A/Documents/images/D5E1640B-836A-4EC9-A5C2-65B2E4E8CFE0.jpg

Android: 

file:///storage/emulated/0/Pictures/image-ec0667ed-ecc5-4eed-928f-26fed6a63860.jpg

上传成功截图:

react native 之上传文件的更多相关文章

  1. React Native 打包.jsx文件

    最近在研究React Native.感觉开发效率确实不错,但jsx语法写起来感觉不怎么顺手. 试用了Sublime Text 3和Visual Studio Code写代码,感觉反应总是慢一拍. 还是 ...

  2. FTP文件操作之上传文件

    上传文件是一个比较常用的功能,前段时间就做了一个上传图片的模块.开始采用的是共享文件夹的方式,后来发现这种方法不太好.于是果断将其毙掉,后来选择采用FTP的方式进行上传.个人感觉FTP的方式还是比较好 ...

  3. React Native之APK文件签名及打包

    生成apk签名文件 我们使用android studio的方式进行签名 AS工具栏找到并点击 build->gennrate signed apk 两种情况: 1.这里如果已经有签名文件了则直接 ...

  4. 转:python webdriver API 之上传文件

    文件上传操作也比较常见功能之一,上传功能操作 webdriver 并没有提供对应的方法,关键上传文件的思路.上传过程一般要打开一个系统的 window 窗口,从窗口选择本地文件添加.所以,一般会卡在如 ...

  5. Django之上传文件

    使用Form表单上传文件 upload.html <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. Android WebView那些坑之上传文件

    最近公司项目需要在WebView上调用手机系统相册来上传图片,开发过程中发现在很多机器上无法正常唤起系统相册来选择图片. 解决问题之前我们先来说说WebView上传文件的逻辑:当我们在Web页面上点击 ...

  7. Flask入门之上传文件到服务器

    今天要做一个简单的页面,可以实现将文件 上传到服务器(保存在指定文件夹) #Sample.py # coding:utf-8 from flask import Flask,render_templa ...

  8. LoadRunner开发ftp协议接口之上传文件脚本

    Action() { //建立一个ftp对象 FTP ftp1=0; //建立FTP连接并登录 ftp_logon_ex(&ftp1,"ftpLogon", "U ...

  9. jQuery插件之上传文件ajaxfileupload.js源码与使用

    在网页应用中,一般会用到上传文件或者图片什么的到服务器,那么可以用ajaxfileupload.js,但是在使用ajaxfileupload.js时候,当服务器返回的json带有&符号的时候, ...

随机推荐

  1. hihocoder挑战赛26

    某蒟蒻成功的·写出了T1并rank16...小岛的题目真难... 传送门:http://hihocoder.com/contest/challenge26 T1 如果你想要暴力枚举的话显然是不行的 如 ...

  2. input框只能输入整数和浮点数非数字就不输入

    <input type="text" onInput="clearNoNum(this)" > //需引入jquery <script> ...

  3. NoSQL生态系统——事务机制,行锁,LSM,缓存多次写操作,RWN

    13.2.4 事务机制 NoSQL系统通常注重性能和扩展性,而非事务机制. 传统的SQL数据库的事务通常都是支持ACID的强事务机制.要保证数据的一致性,通常多个事务是不可能交叉执行的,这样就导致了可 ...

  4. phpize建立php扩展 Cannot find config.m4

    centos  php  安装 memcache 扩展的时候   爆 Cannot find config.m4 错误 解决方案参考以下文章 参考文章 http://blog.csdn.net/wgl ...

  5. canvas 时钟+自由落体

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. Labview调用Python脚本

    Labview程序框图如下: Python脚本如下: #!/usr/bin/env pythonimport sys #Command Line Arguements are stored in li ...

  7. js归并排序法

    function mergeSort(arr) { var len = arr.length; if(len > 1) { var index = Math.floor(len / 2); le ...

  8. C# ADO.NET 连接Sybase 数据库

    using Sybase.Data.AseClient;//反编译修改后的DLL public class SybaseHelper { public AseConnection con; publi ...

  9. React Native + Nodejs 使用RSA加密登录

    想用rn做个RSA(非对称加密)登录 基本流程就是在服务端生成RSA后,将“公钥”发到客户端,然后客户端用“公钥”加密信息发送到服务端,服务务端用私钥解密. 过程不复杂,问题在于,nodejs和rn都 ...

  10. json处理总结(前端js和后端java)

    前端(js): json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键,下面将介绍两者之间的相互转换. json字符串:var st ...