vue3 FileReader

Vue 3 中的 `FileReader` 是用于读取本地文件的 JavaScript API。在 Vue 3 中，可以通过在组件中创建一个 `FileReader` 实例来读取本地文件。

以下是一个示例：

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <div v-if="fileContent">{{ fileContent }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileContent: "",
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = () => {
        this.fileContent = reader.result;
      };
      reader.readAsText(file);
    },
  },
};
</script>

在这个示例中，当用户选择文件时，`handleFileChange` 方法将被调用。该方法获取文件并使用 `FileReader` 实例读取文件内容。一旦文件读取完成，`onload` 回调函数将被调用，将文件内容设置为 `fileContent` 数据属性，最后在模板中渲染出来。