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

最新推荐文章于 2024-03-08 22:28:26 发布

六卿

最新推荐文章于 2024-03-08 22:28:26 发布

阅读量2.3k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： # js # axios 文章标签： base64 图片乱码二进制流

本文链接：https://blog.csdn.net/qq_43291759/article/details/119727741

js 同时被 2 个专栏收录

99 篇文章

订阅专栏

axios

3 篇文章

订阅专栏

本文介绍了如何使用axios从后端获取图片URL，并正确设置请求参数以处理返回的图片二进制流。通过设置`responseType: 'arraybuffer'`，然后将ArrayBuffer转换为Base64字符串，可以将图片数据用于前端展示。这个过程涉及到对二进制数据的处理和转换，对于前端开发者理解数据交互和图片处理至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端给了一个图片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),
             ""
           )