最近遇到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. JAVA集合类汇总

    一.集合与数组 数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用. ...

  2. TEA,XXTEA介绍,对称加密

    总结:在使用加密的时候,我们可以加入随机数,这样相同的明文,每次加密后得到不同的密文,同时可以在密文中加入密文有效期,控制密文的有效时间长度. 针对有的功能扩展使用,很好的思想. TEA对 64 位数 ...

  3. Linux用sendmail发信失败,提示Connection refused by [127.0.0.1]

    现象: Linux用sendmail发信失败,提示Connection refused by [127.0.0.1] 29 14:10:44 iZ257p7xxilZ sendmail[3395]: ...

  4. sql脚本多服务器操作

    --创建链接服务器exec sp_addlinkedserver 'srv_lnk','','SQLOLEDB','IP' exec sp_addlinkedsrvlogin 'srv_lnk','f ...

  5. css选择符

    E>F:子选择符,选择所有作为E元素的子元素F.<style type="text/css">li>a {color: #ccc;}</style&g ...

  6. Spring Framework的核心:IOC容器的实现

    2.1   Spring IoC容器概述 2.1.1 IoC容器和依赖反转模式 依赖反转的要义,如果合作对象的引用或依赖关系的管理由具体对象来完成,会导致代码的高度耦合和可测性的降低.依赖控制反转的实 ...

  7. 关于float高度塌陷问题

    和所有刚入门的菜鸟一样,我发现float有高度塌陷问题,又很偶然的发现float元素后加<img/>能消除float带来的破坏性. 后来百度了一下,大部分的float高度塌陷问题都没有提及 ...

  8. JS中的数据类型检测

    JavaScript的数据类型分为两类:原始类型(primitive type)和对象类型(object type).原始类型有5种,分别是:数字(Number).字符串(String).布尔值(Bo ...

  9. Swift运算符

    运算符分类 运算符分类 一元运算符 1.负号运算符 var number1 = var number2 = -number1 2.正号运算符 //正号运算符不做任何操作 var number3 = + ...

  10. MicroERP1.0简介及下载

    Micro ERP(蓝本)适用于中小微型企事业单位实施信息化管理.本系统研发初始即摒弃了传统ERP所众所周知的诸多繁琐功能,始终坚持以简化流程.平稳实施.快 速应用为切入点.在功能不断完善.健壮的同时 ...