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