后端返回图片流前端展示图片

根据后端返回的图片流格式,选用合适方法转换
下面以base64为例

if(res.status == 200) {
   
     res.data.data.forEach((item,index) => {
   
        let Array = 'data:image/png;base64,' + item
        let blob = this.base64toBlob(Array)
        let url = URL.createObjectURL(blob)
        this.imageList.push({
   
             name:this.keyList[index],
             src:url
        })
   });
}

下面是图片流的两种转换方式:

arrayBufferToBase64(buffer) {
   
   var binary = ''
   var bytes = new Uint8Array(buffer)
   var len = bytes.byteLength
   for (var i = 0; i < len; i++) {
   
      binary += String.fromCharCode(bytes[i])
   }
   return window.btoa(binary)
},
base64toBlob(dataurl) {
   
   var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
   bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
   while (n--) {
   
     u8arr[n] = bstr.charCodeAt(n);
   }
   return new Blob([u8arr], {
    type: mime });
},

相关推荐

  1. 返回图片前端展示图片

    2023-12-09 03:50:01       60 阅读
  2. 返回图片格式乱码

    2023-12-09 03:50:01       41 阅读
  3. 如何在前端展示返回的pdf Base64格式字符串

    2023-12-09 03:50:01       28 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-09 03:50:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-09 03:50:01       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-09 03:50:01       87 阅读
  4. Python语言-面向对象

    2023-12-09 03:50:01       96 阅读

热门阅读

  1. C语言实现ARM MCUJTAG离线调试器

    2023-12-09 03:50:01       56 阅读
  2. YOLOv7 学习笔记

    2023-12-09 03:50:01       57 阅读
  3. [递归] 平衡矩阵

    2023-12-09 03:50:01       54 阅读
  4. TCPDUMP抓包明确显示IP地址和端口号

    2023-12-09 03:50:01       50 阅读
  5. 连接池 Druid (三) - 获取连接 getConnection

    2023-12-09 03:50:01       60 阅读
  6. Python嗅探和解析网络数据包

    2023-12-09 03:50:01       72 阅读
  7. vue3 setup router的使用教程

    2023-12-09 03:50:01       74 阅读