vue3 base64转图片并展示

在Vue3中，你可以使用`FileReader API`和`canvas`来将Base64编码的图片数据转换为真正的图片，并将其显示在页面上。这里是一个简单的示例：

首先，你需要安装一个叫做`vue-file-preview`的轻量级库，它可以帮助处理文件预览。你可以使用npm或yarn来安装：

npm install vue-file-preview
# 或者
yarn add vue-file-preview

然后，在组件中引入并使用它：

<!-- 引入样式 -->
<link rel="stylesheet" href="@/node_modules/vue-file-preview/dist/file-preview.css" />

<!-- 在template中使用 -->
<template>
  <div>
    <file-preview ref="preview" :file="fileToPreview" />
  </div>
</template>

<script>
import { ref } from 'vue';
import FilePreview from 'vue-file-preview';

export default {
  components: {
    FilePreview
  },
  setup() {
    const fileToPreview = ref(null);

    // 当Base64字符串可用时，调用这个方法转换并设置到组件
    const convertBase64ToImage = async (base64Data) => {
      try {
        const blob = await atob(base64Data);
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = async () => {
          const imgBlob = new Blob([reader.result.slice(reader.result.indexOf(',') + 1)], {
            type: 'image/jpeg' // 或者根据实际的图片类型调整
          });
          setFileToPreview(URL.createObjectURL(imgBlob)); // 设置到组件的引用中
        };
      } catch (error) {
        console.error('Error converting Base64 to image:', error);
      }
    };

    return {
      fileToPreview,
      convertBase64ToImage // 如果你有一个Base64字符串，可以在这里调用它
    };
  }
};
</script>

在这个例子中，`fileToPreview`是一个Vue ref，用来存储图片的URL。`convertBase64ToImage`函数接收一个Base64字符串，解码后转换为Blob对象，再创建一个URL对象来展示图片。

相关问题：
1. 为什么需要`FileReader API`？
2. `URL.createObjectURL`的作用是什么？
3. 如何处理Base64字符串失效的情况？