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