当前位置：首页 > news >正文

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

news 2025/9/3 6:16:26

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

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

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

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

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.resultconst 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?

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

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

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

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

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

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

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

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