前端处理后端图片流乱码问题并解决axios返回值问题

最新推荐文章于 2022-11-04 16:58:54 发布

siyi_blog

最新推荐文章于 2022-11-04 16:58:54 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/siyi_blog/article/details/103477156

本文介绍了一种在前端处理后端图片流乱码的方法，通过使用axios获取图片流并转换为base64编码，解决了图片显示问题。文章详细展示了如何设置axios请求参数，如responseType为arraybuffer，并提供了代码实现。

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

前端处理后端图片流乱码问题并解决axios返回值问题

this.dealImg(url).then((data)=>{
// data就是dealImg的返回结果，也就是.then里面取得的data，拿到值后就可以在这里处理了
	console.log(data);
})
dealImg(url) {   
    // 处理后端传过来的图片流乱码问题
      if (url) {
       return new Promise((resolve,reject)=>{
             this.$axios
          .get("url", {
            params: {
              pic_path: url
            },
            responseType: "arraybuffer"
          })
          .then(res => {
            return ("data:image/jpeg;base64," +btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), "")));
          })
          .then(data => {
            resolve(data)                                  
          })
          .catch(err => {
          });
        })       
      }
    },

参考链接