使用FileReader API时无法设置Vue数据变量的问题

嘿，作为Vue新手遇到这种问题太正常了，你的核心思路没问题——允许用户上传含JSON文件的文件夹，再遍历存入data的orderedFiles是完全可行的！你现在没法在onload里访问data，99%是回调函数里的this指向不对，跟你说下怎么解决：

先纠正data的写法（很重要！） #

首先你的data定义有语法错误，Vue组件的data必须返回一个对象，正确写法是：

data() {
  return {
    orderedFiles: {},
    jsonData: "cat"
  }
}

解决onload里访问不到data的核心问题 #

在传统的function()回调里，this指向的是FileReader实例，不是你的Vue组件实例，所以没法直接访问this.jsonData或者this.orderedFiles。有两种简单的解决办法：

方法1：用箭头函数（推荐） #

箭头函数会继承外部作用域的this，也就是你的Vue组件实例：

methods: {
  handleFile(file) {
    const reader = new FileReader();
    // 用箭头函数作为onload回调
    reader.onload = (e) => {
      try {
        const jsonResult = JSON.parse(e.target.result);
        // 这里的this就是Vue实例，直接访问data
        this.jsonData = jsonResult;
        // 把JSON文件按文件名存入orderedFiles
        this.orderedFiles[file.name] = jsonResult;
      } catch (err) {
        console.error(`解析文件${file.name}出错：`, err);
      }
    };
    reader.readAsText(file);
  }
}

方法2：提前保存Vue实例的this #

如果习惯用普通函数，就先把Vue实例的this存到变量里：

methods: {
  handleFile(file) {
    const vm = this; // 保存Vue实例的引用
    const reader = new FileReader();
    reader.onload = function(e) {
      try {
        const jsonResult = JSON.parse(e.target.result);
        // 用vm代替this访问data
        vm.jsonData = jsonResult;
        vm.orderedFiles[file.name] = jsonResult;
      } catch (err) {
        console.error(`解析文件${file.name}出错：`, err);
      }
    };
    reader.readAsText(file);
  }
}

完整的文件夹上传实现示例 #

给你一个完整的小例子，包含文件夹上传的input和处理逻辑：

<template>
  <div>
    <!-- 开启文件夹上传支持 -->
    <input type="file" webkitdirectory @change="handleFolderUpload" />
    <div>当前解析的JSON数据：{{ jsonData }}</div>
    <div>所有上传的JSON文件：{{ orderedFiles }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderedFiles: {},
      jsonData: "cat"
    };
  },
  methods: {
    handleFolderUpload(event) {
      const files = event.target.files;
      // 把FileList转成数组遍历
      Array.from(files).forEach(file => {
        // 只处理JSON文件
        if (file.name.endsWith('.json')) {
          this.handleFile(file);
        }
      });
    },
    handleFile(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        try {
          const jsonResult = JSON.parse(e.target.result);
          this.jsonData = jsonResult;
          this.orderedFiles[file.name] = jsonResult;
        } catch (err) {
          console.error(`文件${file.name}不是有效的JSON：`, err);
        }
      };
      reader.readAsText(file);
    }
  }
};
</script>

注意事项 #

• webkitdirectory属性是webkit内核浏览器（Chrome、Edge等）支持的，大部分现代浏览器都能用，如果要兼容Firefox等，可能需要额外处理，但日常开发足够用了。
• 一定要加try-catch包裹JSON解析，避免用户上传非JSON文件导致页面崩溃。

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