最近遇到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. gulp教程之gulp-concat

    简介: 使用gulp-concat合并javascript文件,减少网络请求. 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件 1. ...

  2. C++内存管理的缩影

    都说C++内存管理是个大坑.实际上也确实是这样. C++有析构函数,每当一个对象过期的时候,C++会执行两个动作 1.执行析构函数. 2.将对象和对象的所有数据删除. 很多人就会问了,既然有把对象删除 ...

  3. [转+整理] Android 分辨率,密度,像素单位说明

    Android支持下列所有单位: px(像素):屏幕上的一个点.不同设备显示效果相同,一般我们HVGA代表320×480像素,这个用的比较多.in(英寸):长度单位.mm(毫米):长度单位.pt(磅) ...

  4. jquery.validate.js 表单验证简单用法

    引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...

  5. java 事件处理机制:按下上下左右键控制小球的运动

    /** * 加深对事件处理机制的理解 * 通过上下左右键来控制一个小球的位置 */package com.test3;import java.awt.*;import javax.swing.*;im ...

  6. 实验8 SQLite数据库操作

    实验报告 课程名称 实验8  SQLite数据库操作 实验日期 2016.5.6 实验项目名称 多媒体应用开发 实验地点 S30010 实验类型 □验证型    √设计型    □综合型 学  时 一 ...

  7. 安卓自动化测试:Android studio 自带的 Record Espresso Test || [ Appium & (Android studio || Python|| Eclipse ) ]

    1.Android studio 自带的 Record Espresso Test  https://developer.android.com/studio/test/espresso-test-r ...

  8. SYN攻击

    一.TCP握手协议 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接. 第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服 ...

  9. android 取消edittext焦点

    页面中如果有EditText会默认获取焦点,如果进入页面时不想让其获取到焦点可以按如下步骤: 1.在布局的最外层添加属性: android:focusable="true" and ...

  10. Uart、SPI和I2C的区别

    串口通信:UART.SPI.I2C区别[引用]   1.UART就是两线,一根发送一根接收,可以全双工通信,线数也比较少.数据是异步传输的,对双方的时序要求比较严格,通信速度也不是很快.在多机通信上面 ...