一种通用的上传文件+下载模板弹框

import { Button, Space, Upload, Modal } from 'antd';
const { Dragger } = Upload;
import { InboxOutlined } from '@ant-design/icons';
import styles from './index.less';
import { connect } from 'dva';
import { useState } from 'react';

const SpecUploadModal = (props: any) => {
  const { onCancel, onSubmit, dispatch } = props;

  // 当前上传的文件
  const [files, setFiles] = useState<any>('');

  /**
   * 封装上传的文件
   * @param {any} file 上传文件数据
   */
  const packageData = (file: any) => {
    setFiles(file);
  };

  /**
   * 确认提交上传的指引条目方法
   */
  const _onOK = () => {
    onSubmit(files);
  };

  /**
   * 下载批量导入指引条目模板方法
   */
  const _downloadTemp = () => {
    dispatch({
      type: 'dictContent/downloadTemp'
      // payload: {}
    });
  };

  return (
    <Modal
      maskClosable={false}
      visible
      destroyOnClose
      title={intl.formatMessage({ id: 'Batch import' })}
      onCancel={onCancel}
      className={styles.batchAdd}
      footer={
        <Space>
          <Button
            type="primary"
            className={styles.batchAdd_okBtn}
            onClick={_onOK}
          >
            {intl.formatMessage({ id: 'OK' })}
          </Button>
          <Button onClick={onCancel} className={styles.batchAdd_cancelBtn}>
            {intl.formatMessage({ id: 'Cancel' })}
          </Button>
        </Space>
      }
    >
      <Dragger
        className={styles.batchAdd_upload}
        maxCount={1}
        beforeUpload={(file: any) => {
          packageData(file);
          return false;
        }}
        fileList={files ? [files] : []}
        accept={'.xls, .xlsx'}
        onRemove={() => setFiles(undefined)}
      >
        <InboxOutlined className={styles.batchAdd_uploadIcon} />
        <p className={styles.batchAdd_uploadFont}>
          {intl.formatMessage({ id: 'Click or drag the file to upload' })}
        </p>
      </Dragger>
      <Button className={styles.batchAdd_downloadTemp} onClick={_downloadTemp}>
        {intl.formatMessage({ id: 'Download Template' })}
      </Button>
    </Modal>
  );
};

export default connect()(SpecUploadModal);

css样式

.batchAdd {
  width: 580px !important;

  :global {
    .ant-modal-header {
      background-color: #2993ce;
    }

    .ant-modal-footer {
      button {
        height: 30px;
        width: 80px;
      }
    }
  }


  .batchAdd_upload {
    .batchAdd_uploadIcon {
      font-size: 55px;
      color: #77bce4;
    }

    .batchAdd_uploadFont {
      font-size: 14px;
    }
  }

  .batchAdd_downloadTemp {
    margin-top: 10px;
  }

  .batchAdd_message {
    color: rgb(255, 45, 45);
    margin-top: 10px;
  }
}