前端实现解析【导入】数据后调用批量处理接口

1. 导入数据不想调用后端接口，可以前端直接解析上传的Excel文件，解析出文本内容后，再直接调用批量插入数据的接口插入数据么？

当然可以。这是一个很好的优化，可以减轻服务器的压力。我们可以在前端使用一个库来解析 Excel 文件，然后将解析出的数据直接发送到批量添加的接口。

要实现这个功能，我们需要一个用于解析 Excel 文件的库。xlsx（也称为 SheetJS）是一个非常流行的选择。

2. 代码实现，基于 React + Antd

TypeScript 复制代码

import * as XLSX from 'xlsx'
import { message, Upload, type UploadProps } from 'antd'

<Upload {...uploadProps}>
  <Button loading={uploading} icon={<UploadOutlined />}>
    导入邮箱
  </Button>
</Upload>

const uploadProps: UploadProps = {
  name: 'file',
  showUploadList: false,
  beforeUpload: (file: any) => {
    const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    if (!isExcel) {
      message.error('只能上传 Excel 文件!')
      return Upload.LIST_IGNORE
    }

    setUploading(true)
    const reader = new FileReader()
    reader.onload = async (e) => {
      try {
        const data = e.target.result
        const workbook = XLSX.read(data, { type: 'array' })
        const firstSheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[firstSheetName]
        const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 })

        // 假设第一行是表头
        const headers = json[0] as string[]
        const rows = (json.slice(1) as any[][]).filter(
          (row) => row.length > 0 && row.some((cell) => cell)
        )

        // 映射表头到API字段
        const headerMap: Record<string, string> = {
          名称: 'name',
          类型: 'type',
          说明: 'remark',
        }

        // 校验名称列
        const nameColumnIndex = headers.indexOf('名称')
        if (nameColumnIndex === -1) {
          message.error('模板中未找到"名称"列，请检查文件')
          return
        }

        const names = rows.map((row) => (row as any[])[nameColumnIndex])

        // 检查空数据
        if (names.some((name) => !name)) {
          message.error('名称列存在空数据，请检查后重新上传')
          return
        }

        // 检查重复数据
        const nameSet = new Set()
        for (const name of names) {
          if (nameSet.has(name)) {
            message.error(`名称 "${name}" 重复，请检查后重新上传`)
            return
          }
          nameSet.add(name)
        }

        const dataToSubmit = rows.map((row) => {
          const rowData: Record<string, any> = {}
          headers.forEach((header, index) => {
            const apiKey = headerMap[header]
            if (apiKey) {
              rowData[apiKey] = (row as any[])[index]
            }
          })

          return rowData
        })

        // 调用批量添加接口的方法
        handleBatchAdd(dataToSubmit)
      } catch (error) {
        message.error('文件解析或导入失败')
      } finally {
        setUploading(false)
      }
    }
    reader.readAsArrayBuffer(file)

    return Upload.LIST_IGNORE // 阻止自动上传
  },
}

3. 我不太明白reader.onload和reader.readAsArrayBuffer(file)的执行顺序，以及最后为什么返回这个return Upload.LIST_IGNORE?

这三部分共同实现了一个自定义的、在前端处理文件的上传逻辑。

reader.readAsArrayBuffer(file) - 开始读文件这行代码是整个文件读取过程的起点。

它的作用是告诉浏览器："现在开始读取用户选择的这个 file 文件，并把它的内容转换成一个 ArrayBuffer（一种内存中的二进制数据格式）。"
这是一个异步操作。也就是说，它像一个经理分配任务，把"读文件"这个耗时的任务交给浏览器底层去处理，它自己则不会等待任务完成，而是立刻返回，让 beforeUpload 函数继续执行下面的代码。

reader.onload - 文件读完后做什么

这个 onload 是一个事件处理函数，你可以理解为"任务完成后的回调"。

在调用 readAsArrayBuffer 之前，我们先定义好 onload 函数。这相当于提前告诉浏览器："等你成功把文件读完之后，就来执行 onload 里面的这些代码。"
onload里的代码（解析Excel、处理数据、调用API）只有在文件被完全、成功地读取到内存后才会被触发执行。

return Upload.LIST_IGNORE - 告诉 antd 组件"交给我处理"这是 antd Upload 组件提供的一个特殊返回值。

beforeUpload 函数的返回值可以控制 Upload 组件的行为。
默认情况下，Upload 组件会自己尝试将文件上传到一个服务器地址（通过 action 属性指定）。
但是，在这里我们并不想让 Upload 组件自己上传文件。我们的目标是在前端浏览器里直接解析文件内容，然后把解析出来的数据（而不是文件本身）发送到我们的API。
所以，return Upload.LIST_IGNORE 的作用就是明确地告诉 Upload 组件：

"请停止你默认的上传动作，我自己来处理这个文件。"
"同时，也不用在上传列表里显示这个文件了。"

总结执行顺序

beforeUpload 函数被触发。
代码定义了 reader.onload 事件处理函数（此时不执行）。
reader.readAsArrayBuffer(file) 被调用，开始在后台异步读取文件。
beforeUpload 函数立即执行到最后一行，return Upload.LIST_IGNORE，阻止了 antd 的默认上传行为。
过了一会儿（取决于文件大小），文件在后台被读取完毕。
浏览器触发 load 事件，此时才开始执行 reader.onload 函数里的代码，进行文件解析和API调用。

希望这个解释能帮助您理解！