接口返回二進制文件流前端處理方法
前后端分離項目中,為保證數(shù)據(jù)安全性,文件數(shù)據(jù)通常使用接口調(diào)用方式獲取,后端返回二進制文件流后前端該如何處理。
流數(shù)據(jù)轉(zhuǎn)鏈接
獲取到的流文件數(shù)據(jù)(注意:接口調(diào)用時需設(shè)置responseType:blob)使用Blob構(gòu)造函數(shù)（將二進制數(shù)據(jù)存儲為一個單一個體的集合）進行轉(zhuǎn)換，它接受兩個參數(shù)。第一個參數(shù)是數(shù)組，成員是字符串或二進制對象，表示新生成的Blob實例對象的內(nèi)容；第二個參數(shù)是可選的，是一個配置對象。然后通過URL.createObjectURL()方法會根據(jù)傳入的參數(shù)創(chuàng)建一個指向該參數(shù)對象的URL.最后返回一個以blob://xxx的瀏覽器臨時路徑地址
//(例)將pdf流文件數(shù)據(jù)轉(zhuǎn)為臨時鏈接地址
let blob = new Blob([res.data],{type:'application/pdf'}
const url = URL.createObjectURL(blob)
對于不同類型文件轉(zhuǎn)換通過改變type的值實現(xiàn)
文件類型分類
常見文件場景有圖片、視頻、音頻、word、excel、pdf這些類別文章來源：http://www.zghlxwxcb.cn/news/detail-702677.html
| 文件類型(擴展名) | type類型 |
|---|---|
| .jpeg .jpg | image/jpeg |
| .mp3 | audio/mpeg |
| application/pdf | |
| .xls | application/vnd.ms-excel |
| .doc | application/msword |
| application/pdf | |
| .mpeg .mp4 | video/mpeg |
非流文件處理
正常情況下會返回流文件前端進行轉(zhuǎn)換,在錯誤情況下返回報錯(json)信息時,這時我們不需要下載文件而是給出錯誤信息.
接口返回的報錯信息是json格式,由于請求設(shè)置了responseType:‘blob’,所以會轉(zhuǎn)化為Blob類型.
這時需要使用FileReader讀取文件,具體邏輯代碼如下文章來源地址http://www.zghlxwxcb.cn/news/detail-702677.html
//downAllTask為封裝的接口方法,params為請求參數(shù)
downAllTask(params).then((res) => {
//實例讀取文件對象
const r = new FileReader();
r.onload = function () {
try {
// this.result為FileReader獲取blob數(shù)據(jù),如果返回報錯信息,則是正確的json數(shù)據(jù),JSON.parse會正常轉(zhuǎn)換
//如果返回文件流,則JSON.parse時會報錯,走catch代碼塊(進行正常的文件下載)
const resData = JSON.parse(this.result);
//resData是后端返回的json數(shù)據(jù)
if (resData.errorcode===500) {
proxy.$message.warning(resData.msg)
return
}
}catch (error) {
let blob = new Blob([res], { type: "application/zip" });
let url = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "下載圖片";
link.click();
URL.revokeObjectURL(url);
}
}
r.readAsText(res)
}).catch((e)=>{
})
到了這里，關(guān)于返回流文件前端處理方法(全)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
