使用xlsx库将上传Excel转为JSON时返回undefined问题排查

你的函数返回undefined的核心原因是FileReader是异步操作：reader.onload回调里的return并不会让外层的excelSheetUpload函数返回数据——当你调用excelSheetUpload时，函数会立刻执行完毕并返回默认的undefined，而onload回调要等到文件读取完成后才会触发，这时候外层函数早就执行结束了。

修改方案：用Promise处理异步逻辑 #

把函数改成返回Promise，通过resolve传递读取到的数据，同时补上你定义了但没用到的文件类型校验：

import * as XLSX from 'xlsx'

const excelSheetUpload = (file) => {
  return new Promise((resolve, reject) => {
    const fileType = ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-excel"]
    const selectedFile = file[0]

    // 校验文件类型
    if (!selectedFile || !fileType.includes(selectedFile.type)) {
      reject(new Error('请选择有效的Excel文件'))
      return
    }

    const reader = new FileReader();
    reader.readAsArrayBuffer(selectedFile)
    
    reader.onload = (e) => {
      try {
        const workbook = XLSX.read(e.target.result, {type:'buffer' });
        const worksheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[worksheetName];
        const data = XLSX.utils.sheet_to_json(worksheet);
        resolve(data)
      } catch (err) {
        reject(new Error('解析Excel文件失败'))
      }
    }

    reader.onerror = () => {
      reject(new Error('读取文件失败'))
    }
  })
}

export default excelSheetUpload;

React组件中的调用方式 #

因为函数现在返回Promise，你需要用async/await或者.then()来获取数据：

// 方式1：用async/await
const handleFileUpload = async (event) => {
  try {
    const excelData = await excelSheetUpload(event.target.files)
    // 拿到数据后即可用于表格渲染
    console.log(excelData)
  } catch (err) {
    console.error(err.message)
  }
}

// 方式2：用.then()链式调用
const handleFileUpload = (event) => {
  excelSheetUpload(event.target.files)
    .then(excelData => {
      console.log(excelData)
      // 处理数据渲染表格
    })
    .catch(err => {
      console.error(err.message)
    })
}

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