如何实现导入文件和模板下载

前端文件上传​
使用组件（如 Element UI 的 <el-upload>或者 ant.design的 <Upload>）限制文件格式（如 .xls, .xlsx），并调用后端接口提交表单数据

​模板下载​

通过调用 window.open() 发起请求直接下载

import { Upload, Select, Input, Button, message } from 'antd';

// 上传逻辑开始
const fileUploadProps = getUploadElementProps();
  
const getUploadElementProps = () => {
  const props = {
    accept: ACCEPT_FILE_TYPE, // 支持的文件格式（如 ".xlsx,.xls,.csv"）
    multiple: false,          // 禁止多文件上传
    onChange: onChangeUploadHandler, // 文件状态变化回调
    beforeUpload: file => beforeUploadHanler(file), // 上传前校验
    customRequest: customRequest,    // 自定义上传逻辑
    showUploadList: false,           // 隐藏上传文件列表
  };
  return props;
};

//监听文件上传状态变化
const onChangeUploadHandler = ({ file }) => {
  const status = file.status;
  switch (status) {
    case UploadFileStatus.ERROR:
      break; // 上传失败（错误处理可在此扩展）
    case UploadFileStatus.DONE:
      refresh(); // 上传成功时刷新数据
      break;
    default:
      break;
  }
};

const getActionData = file => {
  let formData = new FormData();
  formData.append('file', file); // 将文件添加到 FormData
  return formData;
};

// 自定义上传
const customRequest = (option: any) => {
  const { onSuccess, onError, file } = option;
  const formData = getActionData(file); // 构造 FormData
  setLoading(true); // 显示加载状态
  wapper(caseLibraryResa.importCaseLibrary(formData)).then(result => {
    if (result.isSuccess) {
      onSuccess(); // 触发上传成功回调
      message.success('上传成功！');
    } else {
      onError(); // 触发上传失败回调
      message.success('上传失败！'); // 注意：此处应为 `error` 而非 `success`
    }
    setLoading(false); // 关闭加载状态
  });
};

//校验文件是否为 Excel 格式
const beforeUploadHanler = file => {
  const fileArr = file.name.split('.');
  const fileExtension = fileArr[fileArr.length - 1]; // 获取文件后缀
  const extensionArr = ['xlsx', 'xls', 'csv'];
  const isExcel = extensionArr.includes(fileExtension); // 校验格式
  if (!isExcel) {
    message.error(I18n.t('Only supports uploading Excel files'));
  }
  return isExcel; // 返回布尔值决定是否继续上传
};
// 上传逻辑结束

//模板下载
const downloadTemplate = () => {
    window.open(baseURL + '/xxx/v2/xxx/template/download');
};

  <Upload {...fileUploadProps}>
    <Button loading={loading} style={{ marginTop: '10px', marginRight: '10px' }} type="primary">
      导入案例
    </Button>
  </Upload>
  <Button style={{ marginTop: '10px' }} type="primary" onClick={downloadTemplate}>
    模板下载
  </Button>