接口返回圖片二進制流前端展現

接口返回圖片二進制流前端展現

問題描述

請求後臺接口時，返回圖片內容以下：

咋一看，不是base64格式，二十二進制的圖片流數據，前端要想展現，只須要轉換數據格式爲base64便可。

解決方案

設置responseType爲arraybuffer

設置了arraybuffer後的接口返回：

base64轉換顯示

this.processImgSrc = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))