一、問題描述

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

比如說當(dāng)我們在做登錄驗證是，我們可能需要從后端獲取驗證碼，這是后端傳遞給你的可能是一個圖片數(shù)據(jù)而不是驗證碼數(shù)字。

接口回參：

打印一下：

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

如果我們在請求接口獲取數(shù)據(jù)時不指定返回數(shù)據(jù)類型的話，我們獲取到的可能就是一堆亂碼數(shù)據(jù)。

因此我們在axios接口請求里面指定responseType為blob

再打印一下：

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

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

獲取到數(shù)據(jù)之后要用img標簽進行展示，img標簽的src需要直接指向blob數(shù)據(jù)的話是沒有用的，所以我們要創(chuàng)建一個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ù)時將URL指定為字符串或提供相對URL和基本URL來創(chuàng)建新的URL對象。

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

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

確保檢查您的任何目標瀏覽器是否要求對此添加前綴。

（2）createObjectURL

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

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

3.將url的值賦給img標簽的src屬性

四、最終結(jié)果

五、另一種方式（FileReader）

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

1.FileReader

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

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

詳細可見MDN的：FileReader

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

2.具體實現(xiàn)

        let reader = new FileReader(); // 創(chuàng)建FileReader()實例
        reader.onload = function (evt) { // 當(dāng)文件讀取完成時會執(zhí)行onload事件
            //替換img標簽的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)事件。該事件在讀取操作被中斷時觸發(fā)。
• FileReader.onerror ：處理error (en-US)事件。該事件在讀取操作發(fā)生錯誤時觸發(fā)。
• FileReader.onload ：處理load (en-US)事件。該事件在讀取操作完成時觸發(fā)。

（2）方法

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

總結(jié)

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

最新評論