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

4-文件导入功能文档

article 2025/3/14 0:09:19

文件导入功能文档

文章目录

- - 文件导入功能文档
  - - 1. 功能概述
    - 2. 使用的技术
    - 3. 主要功能
    - 4. 代码实现
    - - 4.1 前端代码实现
      - 4.2 后端接口代码实现
    - 5. 用户操作流程
    - 6. 注意事项
    - 7. 总结
    - 6. 注意事项
    - 7. 总结

1. 功能概述

本功能允许用户通过文件上传，将 Excel 文件（.xlsx 和 .xls 格式）传递给后端进行处理。文件上传前，系统会对文件进行大小和类型的验证，上传成功后，后台会返回相应的状态信息，前端根据这些信息反馈给用户上传结果。

2. 使用的技术

前端技术：React、Ant Design（Upload 组件）
后端接口：接口接收文件并进行相应处理，文件通过 FormData 发送。
文件格式：支持 .xlsx 和 .xls 格式的 Excel 文件。

3. 主要功能

文件选择：用户点击上传按钮选择文件。
文件验证：限制文件大小为 2MB 以下，且仅支持 .xlsx 和 .xls 格式。
文件上传：将选中的文件通过自定义上传函数发送至后端接口。
上传反馈：根据后端响应，显示上传成功或失败的消息。

4. 代码实现

4.1 前端代码实现

上传组件配置

使用 Ant Design 的 Upload 组件，配置自定义上传函数和文件验证规则：

import { Upload, message } from 'antd';
import { UploadProps } from 'antd/es/upload';

const props: UploadProps = {
  name: 'file', // 设置上传的字段名为 'file'，与后端接收的字段名一致
  customRequest: async ({ file, onSuccess, onError }) => {
    try {
      // 创建 FormData 对象，封装文件和其它请求参数
      const formData = new FormData();
      formData.append('file', file); // 将文件添加到 FormData 中

      // 调用后端接口上传文件
      const response = await CodeTable.mabiaoguanli.uploadCodeTableUsingPost({}, file);

      // 根据响应状态判断上传是否成功
      if (response.code === 100200) {
        message.success(`${file.name} 文件上传成功`);
        onSuccess(response); // 通知 Upload 组件上传成功
        actionRef.current?.reload(); // 上传成功后，重新加载表格数据
      } else {
        message.error(`${file.name} 文件上传失败: ${response.msg}`);
        onError(new Error('上传失败')); // 通知 Upload 组件上传失败
      }
    } catch (error) {
      message.error(`${file.name} 文件上传出错`);
      onError(error); // 通知 Upload 组件上传出错
    }
  },
  accept: '.xlsx,.xls', // 限制只能上传 Excel 文件
  beforeUpload(file) {
    // 限制文件大小，最大为 2MB
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('文件大小必须小于 2MB!');
    }
    return isLt2M; // 如果文件符合条件，允许上传
  },
};

展开

上传功能说明
- 自定义上传处理函数 (customRequest)：
  - 文件选择后，会触发 customRequest 方法，将文件通过 FormData 对象封装，并通过 uploadCodeTableUsingPost 方法调用后端接口上传文件。
  - 上传后，根据返回的响应数据（response.code）判断上传是否成功，并进行相应的反馈。
- 上传前验证 (beforeUpload)：
  - 限制文件大小为 2MB，文件大小大于 2MB 会提示错误信息，并阻止上传。

4.2 后端接口代码实现

接口设计

后端接口用于接收上传的文件。通过 FormData 获取文件，并处理上传逻辑。代码示例如下：

export async function uploadCodeTableUsingPost(
  body: {},
  file?: File,
  options?: { [key: string]: any },
) {
  const formData = new FormData();

  // 如果文件存在，将其添加到 FormData 中
  if (file) {
    formData.append('file', file);
  }

  // 将其他请求参数添加到 FormData 中
  Object.keys(body).forEach((ele) => {
    const item = (body as any)[ele];

    if (item !== undefined && item !== null) {
      if (typeof item === 'object' && !(item instanceof File)) {
        if (item instanceof Array) {
          item.forEach((f) => formData.append(ele, f || ''));
        } else {
          formData.append(ele, JSON.stringify(item));
        }
      } else {
        formData.append(ele, item);
      }
    }
  });

  // 返回 formData 对象，交给前端处理上传
  return formData;
}