接口返回二進(jìn)制文件流,前端通過blob對(duì)象實(shí)現(xiàn)下載

二進(jìn)制流轉(zhuǎn)圖片:如果接口返回的是個(gè)圖片,前端需求是展示這個(gè)圖片,可以直接將api放到img標(biāo)簽的src中,和普通ajax請(qǐng)求的接口一樣,這樣在瀏覽器network中可以看到這個(gè)圖片和請(qǐng)求一樣,不過類型成了img類型的。

二進(jìn)制流下載:借助blob對(duì)象,直接貼代碼


Blob 是什么? 這里說的是一種Javascript的對(duì)象類型。

oracle 中也有類似的欄位類型。

[JS進(jìn)階] HTML5 之文件操作(file)

這一篇中用到了File對(duì)象,而實(shí)際上 file 對(duì)象只是 blob 對(duì)象的一個(gè)更具體的版本,blob 存儲(chǔ)著大量的二進(jìn)制數(shù)據(jù),并且 blob 的 size 和 type 屬性,都會(huì)被 file 對(duì)象所繼承。

所以, 在大多數(shù)情況下,blob 對(duì)象和 file 對(duì)象可以用在同一個(gè)地方,例如,可以使用 FileReader 借口從 blob 讀取數(shù)據(jù),也可以使用 URL.createObjectURL() 從 blob 創(chuàng)建一個(gè)新的 URL 對(duì)象。

2. 新方法創(chuàng)建Blob 對(duì)象

在新的方法中直接可以通過 Blob() 的構(gòu)造函數(shù)來創(chuàng)建了。

構(gòu)造函數(shù),接受兩個(gè)參數(shù),第一個(gè)為一個(gè)數(shù)據(jù)序列,可以是任意格式的值,例如,任意數(shù)量的字符串,Blobs 以及 ArrayBuffers。第二個(gè)參數(shù),是一個(gè)包含了兩個(gè)屬性的對(duì)象,其兩個(gè)屬性分別是:

type -- MIME 的類型。

endings -- 決定 append() 的數(shù)據(jù)格式,(數(shù)據(jù)中的 \n 如何被轉(zhuǎn)換)可以取值為 "transparent" 或者 "native"(t* 的話不變,n* 的話按操作系統(tǒng)轉(zhuǎn)換;t* 為默認(rèn)) 。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容