react native 之上传文件
最近遇到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 之上传文件的更多相关文章
- React Native 打包.jsx文件
最近在研究React Native.感觉开发效率确实不错,但jsx语法写起来感觉不怎么顺手. 试用了Sublime Text 3和Visual Studio Code写代码,感觉反应总是慢一拍. 还是 ...
- FTP文件操作之上传文件
上传文件是一个比较常用的功能,前段时间就做了一个上传图片的模块.开始采用的是共享文件夹的方式,后来发现这种方法不太好.于是果断将其毙掉,后来选择采用FTP的方式进行上传.个人感觉FTP的方式还是比较好 ...
- React Native之APK文件签名及打包
生成apk签名文件 我们使用android studio的方式进行签名 AS工具栏找到并点击 build->gennrate signed apk 两种情况: 1.这里如果已经有签名文件了则直接 ...
- 转:python webdriver API 之上传文件
文件上传操作也比较常见功能之一,上传功能操作 webdriver 并没有提供对应的方法,关键上传文件的思路.上传过程一般要打开一个系统的 window 窗口,从窗口选择本地文件添加.所以,一般会卡在如 ...
- Django之上传文件
使用Form表单上传文件 upload.html <!DOCTYPE html> <html lang="en"> <head> <met ...
- Android WebView那些坑之上传文件
最近公司项目需要在WebView上调用手机系统相册来上传图片,开发过程中发现在很多机器上无法正常唤起系统相册来选择图片. 解决问题之前我们先来说说WebView上传文件的逻辑:当我们在Web页面上点击 ...
- Flask入门之上传文件到服务器
今天要做一个简单的页面,可以实现将文件 上传到服务器(保存在指定文件夹) #Sample.py # coding:utf-8 from flask import Flask,render_templa ...
- LoadRunner开发ftp协议接口之上传文件脚本
Action() { //建立一个ftp对象 FTP ftp1=0; //建立FTP连接并登录 ftp_logon_ex(&ftp1,"ftpLogon", "U ...
- jQuery插件之上传文件ajaxfileupload.js源码与使用
在网页应用中,一般会用到上传文件或者图片什么的到服务器,那么可以用ajaxfileupload.js,但是在使用ajaxfileupload.js时候,当服务器返回的json带有&符号的时候, ...
随机推荐
- SAP播放本地视频及音频(仅限于window MediaPlayer可播放文件)
这个是从SCN上看到的,自己稍加修改,编制,做的还可以,可以播放视频,音频,唯一的不足就是不能控制播放视频的显示窗口大小,希望有人能帮忙解决,感激! 视频播放类:(新建类Z_CL_MEDIA,点击基于 ...
- HAproxy配置文件操作
要求 1. 根据用户输入输出对应的backend下的server信息2. 可添加backend 和sever信息3. 可修改backend 和sever信息4. 可删除backend 和sever信息 ...
- HTML5的入门与深入理解
HTML5是对HTML的第5次重大的修改,虽然HTML5 标准还在制定中,但不能阻碍其势不可挡的脚步,不用HTML5你就OUT了.HTML5与我们常用的HTML4有什么区别呢? 首先要说的是不是所有的 ...
- [转载]SQL Server如何保证可空字段中非空值唯一
原文地址:http://www.cnblogs.com/caspnet/archive/2011/02/23/1962638.html 解决问题是:在一个表里面,有一个允许为空的字段,空是可以重复的, ...
- Android Monkey 压力测试 介绍
Monkey 是Android SDK提供的一个命令行工具, 可以简单,方便地运行在任何版本的Android模拟器和实体设备上. Monkey会发送伪随机的用户事件流,适合对app做压力测试 阅读目录 ...
- Shell Script (2) - global.sh
cd web/ui npm run e2e-dev -- -i 1 "should be able to add function with argument to a ingredient ...
- C#中REF和OUT的区别
在C# 中,既可以通过值也可以通过引用传递参数.通过引用传递参数允许函数成员更改参数的值,并保持该更改.若要通过引用传递参数, 可使用ref或out关键字.ref和out这两个关键字都能够提供相似的功 ...
- NSDate 时间
NSDate *date=[NSDate date]; NSDateFormatter *formatter=[[NSDateFormatter alloc]init]; formatter.date ...
- [css]当父元素的margin-top碰上子元素的margin-top
出现条件:父元素和子元素都设置了margin-top 现象:子元素的margin-top可能会失效,导致父元素和子元素粘连在一起 解决方法: 1.给父元素加padding-top:1px. 2.给父元 ...
- 用php获取本周,上周,本月,上月,本季度日期的代码
echo date("Ymd",strtotime("now")), "\n"; echo date("Ymd",str ...