Vue CLI v2.5.2读取上传TXT文件：FileReader是否适用？

绝对没问题，FileReader 就是专门用来在客户端读取文件内容的API，处理文本文件刚好是它的核心场景之一，完全能满足你在Vue CLI v2.5.2里读取上传文本的需求。

下面给你一个贴合你场景的完整示例：

模板部分 #

<template>
  <div>
    <input 
      type="file" 
      accept=".txt,.md,.json" <!-- 限制只能上传文本类文件，可根据需求调整后缀 -->
      @change="onFileChange"
    >
    <!-- 可以在这里预览读取到的内容 -->
    <div v-if="someData">
      <h3>读取到的文本内容：</h3>
      <pre>{{ someData }}</pre>
    </div>
  </div>
</template>

脚本部分 #

<script>
export default {
  data() {
    return {
      someData: '' // 你已经声明的变量
    }
  },
  methods: {
    onFileChange(e) {
      // 获取上传的文件对象
      const file = e.target.files[0];
      if (!file) return;

      // 可选：额外判断文件类型，确保是文本文件
      if (!file.type.includes('text/')) {
        alert('请上传文本类型的文件！');
        return;
      }

      // 创建FileReader实例
      const reader = new FileReader();

      // 监听读取完成事件
      reader.onload = (event) => {
        // 将读取到的文本内容赋值给someData
        this.someData = event.target.result;
        // 这里可以做后续处理，比如提交到后端、解析内容等
      };

      // 以文本格式读取文件，还可以指定编码（比如 reader.readAsText(file, 'utf-8')）
      reader.readAsText(file);
    }
  }
}
</script>

一些补充说明 #

• accept 属性用来限制用户只能选择指定类型的文件，避免误传非文本文件，你可以根据需要添加更多文本后缀（比如.csv、.xml等）
• readAsText 方法支持指定编码，默认是UTF-8，如果你需要处理其他编码的文件可以手动传入
• 可以在reader.onerror事件里添加错误处理逻辑，比如读取失败时给用户提示
• 这个方案完全兼容Vue CLI v2.5.2，因为FileReader是浏览器原生API，和Vue版本没有冲突

内容的提问来源于stack exchange，提问作者ofey