vue3 typescript 如何将 blob 图片转换为 二进制图片

在Vue3中结合TypeScript，如果你想将Blob类型的图片数据转换为二进制图片，你可以使用FileReader API配合一些类型安全的操作。以下是一个示例步骤：

import { ref } from 'vue';
import { ReadableStream } from 'web-streams';

// 假设你有一个名为imageBlob的ref存储了Blob对象
let imageBlob: Ref<Blob> = ref(new Blob());

async function convertToBase64(image: Blob): Promise<string> {
  const reader = new FileReader();
  
  // 设置读取完成后的回调函数，返回的是一个Promise
  reader.onload = async (event: ProgressEvent) => {
    if (event.target && event.target.result) {
      // event.target.result就是转换后的base64字符串
      const binaryData = (event.target as any).result;
      // 这里binaryData就是你需要的二进制图片数据
      // 可以直接赋值给img的src属性或者其他需要的地方
      // 示例：
      // this.imageBinary = binaryData;
    }
  };

  try {
    await reader.readAsDataURL(image); // 使用readAsDataURL方法读取blob转化为data URL
  } catch (error) {
    console.error('Error converting to base64:', error);
  }

  return image; // 返回Promise供后续处理
}

// 调用转换函数并获取结果
convertToBase64(imageBlob.value)
  .then((result) => {
    console.log(result); // 结果应该是Base64编码的字符串
  })
  .catch(console.error);