Vue中如何上传本地JSON文件并将解析内容存入组件变量

onReaderLoad作为普通函数被FileReader触发时，内部this指向的是FileReader实例，而非当前Vue组件实例，因此this.t = json的赋值操作没有修改到组件内定义的t变量，是赋值失败的核心原因。

推荐使用箭头函数写法，无需额外修改this指向，逻辑更清晰：

<template>
  <!-- 原有文件选择输入框可直接保留 -->
  <input type="file" id="file" ref="fileSelect" class="custom-file-input" accept=".json" @change="previewFiles" />
</template>

<script>
export default {
  data() {
    return {
      // 必须提前在data中声明t，否则Vue无法追踪变量变化，后续表格渲染不会自动更新
      t: null
    }
  },
  methods: {
    previewFiles() { 
      const files = this.$refs.fileSelect.files
      // 增加空值校验，避免用户取消选文件时报错
      if (!files || files.length === 0) return
      const reader = new FileReader()
      // 箭头函数不会改变this指向，直接继承外层组件实例的this
      reader.onload = (event) => {
        try {
          // 增加解析错误捕获，避免上传非JSON格式文件时页面崩溃
          const json = JSON.parse(event.target.result)
          this.t = json
          // 赋值完成后可直接调用表格渲染等后续业务逻辑
          // this.renderTable()
        } catch (err) {
          console.error('JSON文件解析失败，请检查文件格式是否正确', err)
        }
      }
      reader.readAsText(files[0])
    },
    // 其他业务函数中可直接通过this.t读取解析后的JSON内容
    // renderTable() {
    //   console.log('读取到的JSON数据：', this.t)
    //   // 表格渲染逻辑
    // }
  }
}
</script>

如果不习惯箭头函数，也可以提前在外层缓存组件实例引用，效果一致：

previewFiles() { 
  const files = this.$refs.fileSelect.files
  if (!files || files.length === 0) return
  // 提前缓存组件实例的this
  const vm = this
  const reader = new FileReader()
  reader.onload = function(event) {
    try {
      const json = JSON.parse(event.target.result)
      vm.t = json
    } catch (err) {
      console.error('JSON文件解析失败', err)
    }
  }
  reader.readAsText(files[0])
}

• 在input标签上增加accept=".json"属性，可以在文件选择窗口默认过滤非JSON文件，降低用户误选概率
• 如果需要在其他页面使用这份JSON数据，可以根据项目技术栈选择状态管理工具（Vuex/Pinia）、路由传参、本地缓存（localStorage/sessionStorage）等方式传递，不要直接跨页面读取组件内部变量
• 如果JSON文件体积过大，不建议存在组件响应式变量中，会增加性能开销，可单独存为非响应式变量后按需读取

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