在vue中将后端返回的二进制图片流转换为base64展示在页面中

最新推荐文章于 2024-08-10 09:36:16 发布

雷迪嘎嘎

最新推荐文章于 2024-08-10 09:36:16 发布

阅读量4.3k

点赞数 5

分类专栏：技巧类文章标签： vue js

本文链接：https://blog.csdn.net/L_eiDigaga/article/details/112935494

版权

技巧类专栏收录该内容

18 篇文章 1 订阅

订阅专栏

有时从后端请求获取到的图片为二进制的流文件，需要展示在页面中，可以将二进制转换为base64即可。这里是在vue项目用的axios请求。
这里就是后端返回的流，看着跟乱码一样
直接上代码

      deviceDoDownload().then(d => {
        console.log(d);
        if (d.data) {//如果返回的有值，则使用返回的底图
          // 先将二进制的流转为blob，注意后面type一定要设置为图片格式
          let blob = new Blob([d.data], { type: "image/jpg" });
          var Fr = new FileReader();
          Fr.readAsDataURL(blob);
          Fr.onload = (event) => {
          //这个就是转换为的base64图片地址
            this.staticMap = event.target.result;
          };
        }
      })

当然这样写最后转的base64是有问题的，在页面中显示不出来，还需要在请求接口中添加responseType表明数据类型

export const deviceDoDownload = () => {
    return axios({
        url: '/aaaaaa',
        method: 'post',
        responseType: "blob" // 表明返回服务器返回的数据类型
    })
}