一、問題描述

該場(chǎng)景適用于所有后端傳遞圖片流數(shù)據(jù)給前端的情形

比如說當(dāng)我們?cè)谧龅卿涷?yàn)證是，我們可能需要從后端獲取驗(yàn)證碼，這是后端傳遞給你的可能是一個(gè)圖片數(shù)據(jù)而不是驗(yàn)證碼數(shù)字。

接口回參：

打印一下：

二、數(shù)據(jù)獲取

如果我們?cè)谡?qǐng)求接口獲取數(shù)據(jù)時(shí)不指定返回?cái)?shù)據(jù)類型的話，我們獲取到的可能就是一堆亂碼數(shù)據(jù)。

因此我們?cè)赼xios接口請(qǐng)求里面指定responseType為blob

再打印一下：

這就獲得一個(gè)封裝好的blob類型數(shù)據(jù)了

三、數(shù)據(jù)展示

獲取到數(shù)據(jù)之后要用img標(biāo)簽進(jìn)行展示，img標(biāo)簽的src需要直接指向blob數(shù)據(jù)的話是沒有用的，所以我們要?jiǎng)?chuàng)建一個(gè)url來指向的的blob數(shù)據(jù)，然后將url賦給img的src屬性。

1.window.URL.createObjectURL()

（1）URL

URL接口用于解析，構(gòu)造，規(guī)范化和編碼 URLs。

它通過提供允許您輕松閱讀和修改URL組件的屬性來工作。

通常，通過在調(diào)用URL的構(gòu)造函數(shù)時(shí)將URL指定為字符串或提供相對(duì)URL和基本URL來創(chuàng)建新的URL對(duì)象。

然后，您可以輕松讀取URL的已解析組成部分或?qū)RL進(jìn)行更改。

如果瀏覽器尚不支持URL()構(gòu)造函數(shù)，則可以使用Window中的Window.URL屬性。

確保檢查您的任何目標(biāo)瀏覽器是否要求對(duì)此添加前綴。

（2）createObjectURL

createObjectURL返回一個(gè)DOMString包含一個(gè)唯一的blob鏈接（該鏈接協(xié)議為以blob:，后跟唯一標(biāo)識(shí)瀏覽器中的對(duì)象的掩碼）。

2.封裝blob數(shù)據(jù)

3.將url的值賦給img標(biāo)簽的src屬性

四、最終結(jié)果

五、另一種方式（FileReader）

我們使用FileReader API也可以實(shí)現(xiàn)，不過我們是將file類型轉(zhuǎn)換為base64編碼，這樣img標(biāo)簽就可以之間展示。

1.FileReader

FileReader 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。

其中File對(duì)象可以是來自用戶在一個(gè)元素上選擇文件后返回的FileList對(duì)象,也可以來自拖放操作生成的 DataTransfer對(duì)象,還可以是來自在一個(gè)HTMLCanvasElement上執(zhí)行mozGetAsFile()方法后返回結(jié)果。

詳細(xì)可見MDN的：FileReader

所以當(dāng)后端傳遞一個(gè)file類型或者前端用戶上傳一個(gè)文件時(shí)，我們可以使用FileReader來進(jìn)行處理

2.具體實(shí)現(xiàn)

        let reader = new FileReader(); // 創(chuàng)建FileReader()實(shí)例
        reader.onload = function (evt) { // 當(dāng)文件讀取完成時(shí)會(huì)執(zhí)行onload事件
            //替換img標(biāo)簽的url
            $("#showImg1").attr("src", evt.target.result);
            console.log(evt.target.result); // evt.target.result就是圖片文件的base64編碼
        }
        reader.readAsDataURL(imgFile); // 讀取imgFile文件

3.簡單介紹

簡單記錄一下FileRender的具體事件以及方法：

（1）事件

• FileReader.onabort ：處理abort (en-US)事件。該事件在讀取操作被中斷時(shí)觸發(fā)。
• FileReader.onerror ：處理error (en-US)事件。該事件在讀取操作發(fā)生錯(cuò)誤時(shí)觸發(fā)。
• FileReader.onload ：處理load (en-US)事件。該事件在讀取操作完成時(shí)觸發(fā)。

（2）方法

• FileReader.abort() ：中止讀取操作。在返回時(shí)，readyState屬性為DONE。
• FileReader.readAsArrayBuffer() ：開始讀取指定的 Blob中的內(nèi)容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數(shù)據(jù)對(duì)象.
• FileReader.readAsBinaryString() ：開始讀取指定的Blob中的內(nèi)容。一旦完成，result屬性中將包含所讀取文件的原始二進(jìn)制數(shù)據(jù)。
• FileReader.readAsDataURL() ：開始讀取指定的Blob中的內(nèi)容。一旦完成，result屬性中將包含一個(gè)data: URL格式的Base64字符串以表示所讀取文件的內(nèi)容。
• FileReader.readAsText() ：開始讀取指定的Blob中的內(nèi)容。一旦完成，result屬性中將包含一個(gè)字符串以表示所讀取的文件內(nèi)容。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論