最近项目的文件上传遇到一个问题,就是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对象本身并通过接口上传到服务器的更多相关文章

  1. (转)在.NET程序运行过程中,什么是堆,什么是栈?什么情况下会在堆(栈)上分配数据?它们有性能上的区别吗?“结构”对象可能分配在堆上吗?什么情况下会发生,有什么需要注意的吗?

    转自:http://www.cnblogs.com/xiaoyao2011/archive/2011/09/09/2172427.html 在.NET程序运行过程中,什么是堆,什么是栈? 堆也就是托管 ...

  2. java反射之获取所有方法及其注解(包括实现的接口上的注解),获取各种标识符备忘

    java反射之获取类或接口上的所有方法及其注解(包括实现的接口上的注解) /** * 获取类或接口上的所有方法及方法上的注解(包括方法实现上的注解以及接口上的注解),最完整的工具类,没有现成的工具类 ...

  3. 前端/H5/JS:通过URL下载文件并转存到其他服务器(微信),Blob文件转File文件

    现在有一个图片URL,在自己服务器上,一个微信提供的媒体文件上传URL,我在前端通过JS实现转存微信服务器 1. http://file.xxx.com/asd.jpg 自己的 2.https://a ...

  4. vue通过Blob实现下载文件

    需求是这样的...... 具体实现,前端拿到后端返回回来的数据,然后通过Blob实现下载,文件内容样式啥的都是后端写的 script代码: 这里的data就是后端返回回来的数据,此方法兼容IE dow ...

  5. 上传数据、下载模板文件解决方案(前端:antd;后端:.Net Core WebAPI)

    一.Excel 模板下载 通过静态文件下载. 将模板文件放在根目录的 public 文件夹下备用. 下载事件方法如下:(通过临时生成一个 a 标签,触发后再移除) downLoadExcelModel ...

  6. svn上传工程之后下载,打开下载之后的工程缺少文件

    当我们把iOS的工程上传到SVN中,当我们再从SVN中下载下来,就会出现错误,这是什么原因呢?我这里出现的错误是找不到文件,后来知道原来是被屏蔽掉了,就是上传的时候不上传某个类型的文件.例如我出错就是 ...

  7. 上传指定url文件到阿里云oss

    好处是不用下载到本地,也不用删除本地文件.省事! 先下载阿里云官方代码  https://github.com/aliyun/aliyun-oss-csharp-sdk 引用其中的 aliyun-os ...

  8. Java实现打包下载BLOB字段中的文件

    概述 web项目的文件打包下载实现:servlet接收请求,spring工具类访问数据库及简化大字段内容获取,org.apache.tools.zip打包. 必要提醒:当前总结是继Java实现下载BL ...

  9. Struts2实现文件的上传与动态下载功能。

    本篇主要使用Struts2实现文件的上传与动态下载功能.出于安全考虑,所以,在硬盘上存储上传的文件的时候,统一都重新命名为随机字符串.用数据库存储真实文件名与随机文件名称之间的关联. 下面的是实体类 ...

随机推荐

  1. 从零打卡leetcode之day 4--无重复最长字符串

    题目描述: 给定一个字符串,找出不含有重复字符的最长子串的长度. 示例: 给定 "abcabcbb" ,没有重复字符的最长子串是 "abc" ,那么长度就是3. ...

  2. linux centos 安装Jenkins(非docker方式)

    写在前面 我之前写过Asp.net Core 使用Jenkins + Dockor 实现持续集成.自动化部署(一):Jenkins安装这jenkisn的安装过程,但这篇使用的是docker的方式安装的 ...

  3. 免费报名 | 腾讯云自研数据库CynosDB交流会

    本文由云+社区发表 作者:技术沙龙 All in 云+时代,数据库的高可用性.按需付费.按需扩展等属性解放了大批开发者.腾讯发布的自研数据库CynosDB作为国内首款同时兼容MySQL和PG的云原生数 ...

  4. React-router杂记

    HashRouter: 即对应url中的hash值,如xx.com/#/a.xx.com/#/a/b, 服务器对任务url都返回同一个url,具体的路径由浏览器区分,因为浏览器不会发送hash后面的值 ...

  5. Scala(三)

    一.控制语句 var x = 40 if(x == 40){ println("greate") } 二.循环 (1) 一般循环 while(a>1){ if(a==2){ ...

  6. 持续集成配置之Nuget

    持续集成配置之Nuget Intro 本文是基于微软的 VSTS(Visual Studio Team Service) 做实现公众类库的自动打包及发布. 之前自己的项目有通过 Github 上的 T ...

  7. Java开发笔记(二十六)方法的输出参数

    前面介绍了方法的输入参数,与输入参数相对应的则为输出参数,输出参数也被称作方法的返回值,意思是经过方法的处理最终得到的运算数值.这个返回值可能是整型数,也可能是双精度数,也可能是数组等其它类型,甚至允 ...

  8. BN算法

    批量归一化(BN: Batch Normalization) 1 BN训练 1)随机梯度下降法(SGD)对于训练深度网络简单高效,但是它有个毛病,就是需要我们人为的去选择参数,比如学习率.参数初始化. ...

  9. C# 消息队列-Microsoft Azure service bus 服务总线

    先决条件 Visual Studio 2015或更高版本.本教程中的示例使用Visual Studio 2015. Azure订阅. 注意 要完成本教程,您需要一个Azure帐户.您可以激活MSDN订 ...

  10. java之equals 与 == 的区别

    == : 1.本质:比较的的是地址,栈内存中存放的对象的内存地址. 2.判断引用所指的对象是否是同一个. 3.两边的操作数必须是同一类型的(可父子类)才能编译通过. 4.值类型(int,char,lo ...