在Vue中处理接口返回的二进制图片数据

在Vue中处理接口返回的二进制图片数据，通常需要将二进制数据转换为URL格式，以便在模板中使用。以下是一个简单的例子：

<template>
  <div>
    <img :src="imageUrl" alt="Binary Image" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  created() {
    this.fetchBinaryImage();
  },
  methods: {
    fetchBinaryImage() {
      // 假设 fetchBinary 是一个返回 Promise 的异步方法，它解析接口返回的二进制数据
      fetchBinary().then(binaryData => {
        // 将二进制数据转换为URL
        this.imageUrl = this.createObjectURL(binaryData);
      });
    },
    createObjectURL(binaryData) {
      return window.URL.createObjectURL(new Blob([binaryData], { type: 'image/png' }));
    }
  },
  beforeDestroy() {
    // 如果有必要，在组件销毁前移除创建的URL，释放内存
    window.URL.revokeObjectURL(this.imageUrl);
  }
};
</script>

在这个例子中，fetchBinaryImage 方法用于获取二进制图片数据，然后使用 createObjectURL 方法将其转换为可在 <img> 标签中使用的URL。通过这种方式，可以直接在模板中显示图片，而不需要将其转换为Base64编码。记得在组件销毁前使用 revokeObjectURL 方法来释放内存。