Taro文件上传:Blob Url下载Blob对象本身并通过接口上传到服务器
最近项目的文件上传遇到一个问题,就是Taro的chooseImage传给回调的是一个Blob对象,一般来说,上传控件都会导出Data Url,而Taro给了一个Blob Url,问题在于,我直接令img.src=url,显示图片完全没问题,问题在于,我要实现文件上传,就要拿到Blob本身,而不是一个访问他的句柄或者说链接。这个url我只能在浏览器内部使用,即使你把这串拿到浏览器中访问,也是访问不到的。那么问题变成:1. 拿到blob本身。 2. 转成服务端能接受的格式发过去。
1. 获取Blob对象本身:
getBlob(url, callback) {
var xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.responseType = 'blob'
xhr.onload = () => {
callback(xhr.response)
}
xhr.send()
}
附上一个转换Data Url的链接:
blobToDataURL(blob, callback) {
var a = new FileReader();
a.onload = e => {
callback(e.target.result);
}
a.readAsDataURL(blob);
}
2. 上传,我的服务支持二进制流的文件上传
addSporterModel.imgUpload = async (blob) => { const fd = new FormData();
fd.append('avatar', blob)
const result = await axios.post(baseUrl + '/uploads', fd, { headers: { 'Content-Type': 'multipart/form-data' } })
addSporterModel.img = result.data.id
return result }
详细了解Blob
https://juejin.im/post/59e35d0e6fb9a045030f1f35
一些工具函数参考:
https://blog.csdn.net/hahahhahahahha123456/article/details/80605836
https://blog.csdn.net/cuixiping/article/details/45932793
Taro文件上传:Blob Url下载Blob对象本身并通过接口上传到服务器的更多相关文章
- (转)在.NET程序运行过程中,什么是堆,什么是栈?什么情况下会在堆(栈)上分配数据?它们有性能上的区别吗?“结构”对象可能分配在堆上吗?什么情况下会发生,有什么需要注意的吗?
转自:http://www.cnblogs.com/xiaoyao2011/archive/2011/09/09/2172427.html 在.NET程序运行过程中,什么是堆,什么是栈? 堆也就是托管 ...
- java反射之获取所有方法及其注解(包括实现的接口上的注解),获取各种标识符备忘
java反射之获取类或接口上的所有方法及其注解(包括实现的接口上的注解) /** * 获取类或接口上的所有方法及方法上的注解(包括方法实现上的注解以及接口上的注解),最完整的工具类,没有现成的工具类 ...
- 前端/H5/JS:通过URL下载文件并转存到其他服务器(微信),Blob文件转File文件
现在有一个图片URL,在自己服务器上,一个微信提供的媒体文件上传URL,我在前端通过JS实现转存微信服务器 1. http://file.xxx.com/asd.jpg 自己的 2.https://a ...
- vue通过Blob实现下载文件
需求是这样的...... 具体实现,前端拿到后端返回回来的数据,然后通过Blob实现下载,文件内容样式啥的都是后端写的 script代码: 这里的data就是后端返回回来的数据,此方法兼容IE dow ...
- 上传数据、下载模板文件解决方案(前端:antd;后端:.Net Core WebAPI)
一.Excel 模板下载 通过静态文件下载. 将模板文件放在根目录的 public 文件夹下备用. 下载事件方法如下:(通过临时生成一个 a 标签,触发后再移除) downLoadExcelModel ...
- svn上传工程之后下载,打开下载之后的工程缺少文件
当我们把iOS的工程上传到SVN中,当我们再从SVN中下载下来,就会出现错误,这是什么原因呢?我这里出现的错误是找不到文件,后来知道原来是被屏蔽掉了,就是上传的时候不上传某个类型的文件.例如我出错就是 ...
- 上传指定url文件到阿里云oss
好处是不用下载到本地,也不用删除本地文件.省事! 先下载阿里云官方代码 https://github.com/aliyun/aliyun-oss-csharp-sdk 引用其中的 aliyun-os ...
- Java实现打包下载BLOB字段中的文件
概述 web项目的文件打包下载实现:servlet接收请求,spring工具类访问数据库及简化大字段内容获取,org.apache.tools.zip打包. 必要提醒:当前总结是继Java实现下载BL ...
- Struts2实现文件的上传与动态下载功能。
本篇主要使用Struts2实现文件的上传与动态下载功能.出于安全考虑,所以,在硬盘上存储上传的文件的时候,统一都重新命名为随机字符串.用数据库存储真实文件名与随机文件名称之间的关联. 下面的是实体类 ...
随机推荐
- 从零打卡leetcode之day 4--无重复最长字符串
题目描述: 给定一个字符串,找出不含有重复字符的最长子串的长度. 示例: 给定 "abcabcbb" ,没有重复字符的最长子串是 "abc" ,那么长度就是3. ...
- linux centos 安装Jenkins(非docker方式)
写在前面 我之前写过Asp.net Core 使用Jenkins + Dockor 实现持续集成.自动化部署(一):Jenkins安装这jenkisn的安装过程,但这篇使用的是docker的方式安装的 ...
- 免费报名 | 腾讯云自研数据库CynosDB交流会
本文由云+社区发表 作者:技术沙龙 All in 云+时代,数据库的高可用性.按需付费.按需扩展等属性解放了大批开发者.腾讯发布的自研数据库CynosDB作为国内首款同时兼容MySQL和PG的云原生数 ...
- React-router杂记
HashRouter: 即对应url中的hash值,如xx.com/#/a.xx.com/#/a/b, 服务器对任务url都返回同一个url,具体的路径由浏览器区分,因为浏览器不会发送hash后面的值 ...
- Scala(三)
一.控制语句 var x = 40 if(x == 40){ println("greate") } 二.循环 (1) 一般循环 while(a>1){ if(a==2){ ...
- 持续集成配置之Nuget
持续集成配置之Nuget Intro 本文是基于微软的 VSTS(Visual Studio Team Service) 做实现公众类库的自动打包及发布. 之前自己的项目有通过 Github 上的 T ...
- Java开发笔记(二十六)方法的输出参数
前面介绍了方法的输入参数,与输入参数相对应的则为输出参数,输出参数也被称作方法的返回值,意思是经过方法的处理最终得到的运算数值.这个返回值可能是整型数,也可能是双精度数,也可能是数组等其它类型,甚至允 ...
- BN算法
批量归一化(BN: Batch Normalization) 1 BN训练 1)随机梯度下降法(SGD)对于训练深度网络简单高效,但是它有个毛病,就是需要我们人为的去选择参数,比如学习率.参数初始化. ...
- C# 消息队列-Microsoft Azure service bus 服务总线
先决条件 Visual Studio 2015或更高版本.本教程中的示例使用Visual Studio 2015. Azure订阅. 注意 要完成本教程,您需要一个Azure帐户.您可以激活MSDN订 ...
- java之equals 与 == 的区别
== : 1.本质:比较的的是地址,栈内存中存放的对象的内存地址. 2.判断引用所指的对象是否是同一个. 3.两边的操作数必须是同一类型的(可父子类)才能编译通过. 4.值类型(int,char,lo ...