vue3 純前端解碼base64后預覽文件

你可以使用 `FileReader` 对 base64 编码的字符串进行解码，并将解码后的结果显示在页面上。下面是一个示例代码：

<template>
  <div>
    <input type="file" @change="onFileChange">
    <img v-if="preview" :src="preview">
  </div>
</template>

<script>
export default {
  data() {
    return {
      preview: null
    };
  },
  methods: {
    onFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = () => {
          this.preview = reader.result;
        };
        reader.readAsDataURL(file);
      }
    }
  }
};
</script>

在上面的代码中，我们使用了一个 `input` 标签来让用户选择文件。当用户选择文件时，我们会将文件传给 `FileReader` 对象，并调用 `readAsDataURL` 方法将文件读取为 base64 编码的字符串。在读取完成后，我们将解码后的结果保存在组件的 `preview` 数据中，并在页面上展示出来。

需要注意的是，这种方式只适合处理小文件，如果要处理大文件，最好使用服务器端的解码方式。