vue 二进制数据流转换blob对象(转化成前端可识别的图片)

要将二进制数据流转换成前端可识别的图片，可以使用Blob对象。Blob对象表示不可变、原始数据的类文件对象，可以被读取为文本或二进制数据。

下面是将二进制数据流转换成Blob对象并显示为图片的示例代码：

// 假设二进制数据流为 response.data
// 假设图片格式为 image/png

// 将二进制数据流转换成 Blob 对象
const blob = new Blob([response.data], { type: 'image/png' });

// 创建图片元素
const img = document.createElement('img');

// 将 Blob 对象转换成 URL
const imgUrl = URL.createObjectURL(blob);

// 设置图片元素的 src 属性
img.src = imgUrl;

// 将图片元素添加到页面上
document.body.appendChild(img);

这段代码中，我们先将二进制数据流转换成Blob对象，然后使用URL.createObjectURL方法将Blob对象转换成URL，最后将URL设置为图片元素的src属性，即可在页面上显示图片。

相关问题

vue项目如何配置解析后台返回的二进制文件流转换成文件

在 Vue 项目中，可以使用 Blob 对象来将后台返回的二进制文件流转换成文件。具体步骤如下：

1. 在 Vue 项目中，使用 axios 或者其他网络请求库向后台发送请求获取二进制文件流。

2. 将获取到的二进制文件流转换成 Blob 对象，示例代码如下：

   const blob = new Blob([res.data], { type: 'application/octet-stream' })

其中，res.data 是后台返回的二进制文件流。

3. 使用 URL.createObjectURL 方法将 Blob 对象转换成可访问的 URL，示例代码如下：

   const downloadUrl = URL.createObjectURL(blob)

4. 将 URL 作为 download 属性赋值给一个链接标签，用户点击该链接即可下载文件，示例代码如下：

   <a :href="downloadUrl" :download="filename">下载文件</a>

其中，filename 是文件名，可以根据实际情况进行设置。

需要注意的是，使用完 Blob 对象后，需要使用 URL.revokeObjectURL 方法及时释放占用的内存。示例代码如下：

URL.revokeObjectURL(downloadUrl)

vue将二进制流转成图片

在Vue中将二进制流转成图片可以通过创建Blob对象和URL.createObjectURL()方法实现。下面是一个简单的示例代码：

<template>
  <div>
    <img :src="imgUrl" alt="图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: ''
    }
  },
  methods: {
    // 二进制流转成图片
    convertBinaryToImg(binary) {
      const blob = new Blob([binary], {type: 'image/png'}) // 创建Blob对象
      this.imgUrl = URL.createObjectURL(blob) // 转成图片url
    }
  },
  mounted() {
    // 模拟二进制流
    const binary = new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,100,0,0,0,100,8,6,0,0,0,141,100,38,205,0,0,0,9,112,72,89,115,0,0,7,26,0,0,7,26,1,0,154,156,24,0,0,0,4,103,65,77,65,0,0,177,143,11,252,97,5,0,0,0,9,112,73,68,65,84,120,218,237,157,79,108,195,96,20,134,207,239,111,219,35,169,36,130,76,169,10,18,69,73,137,10,138,106,92,72,5,115,37,189,66,235,216,214,122,47,108,98,28,56,167,25,65,46,200,218,210,53,168,150,7,208,156,244,112,102,131,99,48,9,179,174,17,253,174,43,97,205,99,105,117,85,147,186,231,246,123,238,123,247,155,242,36,187,234,41,8,15,219,92,20,247,8,7,194,204,23,192,49,10,0,96,22,194,8,0,128,1,3,0,2,0,128,8,96,2,0,0,0,0,73,69,78,68,174,66,96,130]) // png格式的二进制流
    this.convertBinaryToImg(binary) // 转成图片
  }
}
</script>

在上面的代码中，我们模拟了一个png格式的二进制流，并且将其转成了图片。我们可以根据自己的实际需求来替换二进制流。