vueblob转base64函数封装

Vue.js 中，我们可以封装一个函数来将 Blob 对象转换成 Base64 编码的字符串。Blob 是浏览器原生支持的一种二进制数据类型，而 Base64 是一种常用的编码方式，可以将文件内容转换为可存储于文本环境的数据。

下面是一个简单的 Vue 组件内的自定义方法，用于实现这个功能：

export default {
  methods: {
    blobToBase64(blob) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => {
          if (reader.result) {
            resolve(reader.result);
          } else {
            reject('Failed to read Blob');
          }
        };
        reader.onerror = reject;
        reader.readAsDataURL(blob);
      });
    },
  },
};

在这个 `blobToBase64` 函数中，我们创建了一个 `FileReader` 对象，然后设置其 `onloadend` 事件处理函数，在读取完成时返回 Base64 字符串，如果读取失败则会触发 `onerror` 来拒绝并抛出错误。最后，通过 `readAsDataURL` 方法开始读取 Blob 数据。

使用时，只需在需要的地方调用该方法，例如：

<button @click="convertBlob">Convert Blob to Base64</button>
<p v-if="convertedBase64">{{ convertedBase64 }}</p>

<script setup>
import { ref, onMounted } from 'vue';
const blob = ref(new Blob(...)); // 假设你有一个 Blob 对象
let convertedBase64;

async function convertBlob() {
  try {
    convertedBase64 = await blobToBase64(blob.value);
  } catch (error) {
    console.error(error);
  }
}
</script>