vue3+ts读写本地文件

在Vue3+TypeScript中，可以使用HTML5的File API来读写本地文件。具体步骤如下：

1. 在template中添加一个input元素，设置type为file，用于选择本地文件。

2. 在Vue组件中定义一个方法，用于处理文件读取。该方法需要接收一个event参数，通过event.target.files获取到选择的文件。

3. 使用FileReader对象读取文件内容，可以使用readAsText()方法将文件内容读取为文本格式。

4. 在读取完成后，将文件内容保存到Vue组件的data属性中，即可在template中显示文件内容。

示例代码如下：

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

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      fileContent: '',
    };
  },
  methods: {
    handleFileChange(event: Event) {
      const file = (event.target as HTMLInputElement).files?.[0];      if (file) {
        const reader = new FileReader();
        reader.readAsText(file);
        reader.onload = () => {
          this.fileContent = reader.result as string;
        };
      }
    },
  },
});
</script>