最近项目的文件上传遇到一个问题，就是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