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带有&符号的时候, ...
随机推荐
- UITabBarController
Normal 0 10 pt 0 2 false false false EN-US ZH-CN X-NONE $([{£¥·‘“〈<「『[[[〝﹙﹛﹝$(.[{£¥ !%),.:;>?] ...
- CentOS7下zip解压和unzip压缩文件
1.安装zip.unzip应用. yum install zip unzip
- java selenium (八) Selenium IDE 用法
Selenium IDE 是Firefox 浏览器的一个插件, 它会记录你对Firefox的操作,并且可以回放它的操作. 用法简单,不过我觉得这个没多大的用处 阅读目录 Selenium IDE ...
- 【思路】-分页-双top分页算法的原理
描述:实现分页的一种算法 大致过程:访客访问不同的分页,为这个当前页生成动态的查询SQL,然后送到数据库中执行 输入:总条数,每页多少条,第几页,查询的SQL,排序的字段 注意:传入的排序字段需要构成 ...
- Thrift入门及Java实例演示<转载备用>
Thrift入门及Java实例演示 作者: Michael 日期: 年 月 日 •概述 •下载配置 •基本概念 .数据类型 .服务端编码基本步骤 .客户端编码基本步骤 .数据传输协议 •实例演示(ja ...
- Jquery基础之DOM操作
转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
- CDN 实现原理
传统未加缓存访问过程: 用户提交域名——浏览器对域名进行解释——访问目的主机IP地址——根据IP地址发送请求——得到请求数据并回复 由此我们可以得到未加CDN缓存网站的过程为 (1) 用户向浏览器提供 ...
- spark发行版笔记9
感谢DT大数据梦工厂支持提供技术支持,DT大数据梦工厂专注于Spark发行版定制. 本期概览: 1 Receiver生命全周期 首先,我们找到数据来源的入口,入口如下 Receiver的设计是极其巧妙 ...
- restful 部署 PUT,DELETE 请求发生405 谓词Http不允许
在部署Restful服务的时候,发现中间有个PUT请求的服务,报405 谓词HTTP 不允许解决方法:卸载WebDav 如果不行可以尝试下另一种方式:
- Java日志规范
前言 一个在生产环境里运行的程序如果没有日志是很让维护者提心吊胆的,有太多杂乱又无意义的日志也是令人伤神.程序出现问题时候,从日志里如果发现不了问题可能的原因是很令人受挫的.本文想讨论的是如何在Jav ...