在Vue结合Vuetify项目中使用js-xlsx读取v-file-input组件上传的Excel文件的问题

这问题我之前也碰到过，核心原因是Vuetify的v-file-input组件的@change事件回调参数和原生<input type="file">不一样：原生input的change事件给的是Event对象，你得从e.target.files拿文件；但Vuetify直接把选中的File对象（如果没开multiple就是单个File，开了就是File数组）传给了回调函数，所以你再去取e.target.files肯定会报错，因为File对象根本没有target属性。

给你修正后的代码，关键改动我标出来了：

<template>
  <!-- 如果你需要支持多文件上传，可以加上multiple属性，此时回调会拿到File数组 -->
  <v-file-input label="Upload XLSX" filled @change="handleExcelBrowserUpload"></v-file-input>
</template>
<script>
import XLSX from "js-xlsx";
export default {
  name: 'LoadCurveUpload',
  methods: {
    handleExcelBrowserUpload(file) { // 这里参数直接是File对象，不是事件
      // 如果开启了multiple，这里要改成遍历数组：file.forEach(f => { ... })
      if (!file) return; // 处理用户取消选择文件的情况
      
      const reader = new FileReader();
      const fileName = file.name;
      
      reader.onload = function(e) {
        const data = e.target.result;
        // 读取二进制数据生成workbook
        const workbook = XLSX.read(data, {type: 'binary'});
        console.log("读取到的workbook:", workbook);
        
        // 这里可以继续处理workbook，比如获取第一个工作表的数据
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        const jsonData = XLSX.utils.sheet_to_json(worksheet);
        console.log("工作表转JSON:", jsonData);
      };
      
      // 别忘了调用readAsBinaryString，你原来的代码漏了这一步！
      reader.readAsBinaryString(file);
    }
  }
}
</script>

几个关键说明： #

• 如果需要支持多文件上传，给v-file-input加上multiple属性，此时回调参数file会变成File数组，你需要遍历这个数组逐个处理。
• 要处理用户打开文件选择框后又取消的情况，此时回调会收到null，所以加个if (!file) return的判断避免报错。
• 你原来的代码里创建了FileReader但没调用readAsBinaryString，这会导致reader根本不会去读取文件内容，这也是一个容易忽略的坑点！

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