vue 读取和写入 txt

Vue.js 是一个轻量级的前端 JavaScript 框架，主要用于构建用户界面。如果你想在 Vue 应用中读取和写入文本文件（如 .txt），可以借助浏览器提供的 File API 和一些辅助库。以下是简单的步骤：

1. **读取.txt 文件**:
- 首先，需要获取用户的文件选择，这通常通过 HTML 的 `input` 元素配合 `type="file"` 实现，例如 `<input @change="handleFileSelect" />`，并用 `handleFileSelect` 函数处理文件事件。
- 在 Vue 中，你可以使用 `FileReader` 对象来读取文件内容：

     methods: {
       handleFileSelect(e) {
         const file = e.target.files[0];
         if (file.type === 'text/plain') { // 确保是文本文件
           const reader = new FileReader();
           reader.onload = (event) => {
             this.fileContent = event.target.result; // 将读取的内容存储到数据属性
           };
           reader.readAsText(file);
         }
       },
     }

- `this.fileContent` 就是你读取的 txt 文件内容。

2. **写入.txt 文件**:
- 创建一个新的 Blob 对象来表示要保存的数据，然后创建一个 `URL.createObjectURL` 来生成一个临时 URL，再使用 `fetch` 或者第三方库（比如 axios 或 Axios-file-upload）将内容上传到服务器，服务器接收到请求后会把数据保存到 .txt 文件中。

注意，由于浏览器的安全限制，直接在客户端操作本地文件可能存在风险。在实际项目中，可能需要后端支持或者使用专门用于文件操作的库（如 js-file-system）来进行更安全的操作。