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

有时从后端请求获取到的图片为二进制的流文件，需要展示在页面中，可以将二进制转换为base64即可。这里是在vue项目用的axios请求。直接上代码deviceDoDownload().then(d => {console.log(d);if (d.data) {//如果返回的有值，则使用返回的底图// 先将二进制的流转为blob，注意后面type一定要设置为图片格式let blob = ne

雷迪嘎嘎

4415人浏览 · 2021-01-21 13:49:47

雷迪嘎嘎 · 2021-01-21 13:49:47 发布

有时从后端请求获取到的图片为二进制的流文件，需要展示在页面中，可以将二进制转换为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" // 表明返回服务器返回的数据类型
    })
}