场景: 后端传过来一个文件流图片,需要前端在页面展示。打印出来的ArrayBuffer对象如下:
一开始借鉴了思否上看到的写法,先把获取的ArrayBuffer转成base-64 编码再显示(Uint8Array数组每一位转码后累加再用btoa函数转成base64编码),实现如下:
function getBase64(img) {
const base64Url = `data:image/png;base64,${window.btoa(
new Uint8Array(img).reduce(
(data, byte) => data + String.fromCharCode(byte),
""
)
)}`;
return base64Url;
}
// ...
axios.get(`/get/pic?url=${url}`, {
responseType: "arraybuffer"
}).then(({ data }) => { getBase64(data) })
.then(() => { ... });
后来经大佬指点,发现原来不用转码,直接把图片src换成请求url就可以了,也不需要加上responseType的请求头
<img src={`/get/pic?url=${imgId}`} />