后端返回图片二进制流，前端转base64

后端给了一个图片url：http://localhost:3003/images/0df7f084788cc336e5fb2b2b4e708ed8bgc.jpg

但是我们想通过axios来进行请求：

        axios
          .get(
            "http://localhost:3003/images/0df7f084788cc336e5fb2b2b4e708ed8bgc.jpg",
         
          )
          .then(response => {
            console.log("response.data:",response.data);
          })

却给我们返回了一个图片二进制流。

正确做法，在请求时加一个和headers同级的responseType

 axios.get(
      "http://localhost:3003/images/0df7f084788cc336e5fb2b2b4e708ed8bgc.jpg",
         {
         //和headers   params timeout等属性同级
           responseType: "arraybuffer"
         }
       )
       .then(response => {
         console.log(response);         
         return (
           "data:image/png;base64," +
           btoa(
             new Uint8Array(response.data).reduce(
               (data, byte) => data + String.fromCharCode(byte),
               ""
             )
           )
         );
       })
       .then(data => {
         console.log(data);
       });

这样会返回一个ArrayBuffer数组对象流：

使用：

 "data:image/png;base64," +
        btoa(
           new Uint8Array(response.data).reduce(
             (data, byte) => data + String.fromCharCode(byte),
             ""
           )

转成basse64。