【react踩坑】前端显示文件流图片

场景： 后端传过来一个文件流图片，需要前端在页面展示。打印出来的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}`} />