React umi项目中文件的上传、下载

1.文件上传

<Button type="primary" onClick={downLoadRepairInfo}>

            信息下载

 </Button>

// 下载信息

export async function downLoadRepairInfo() {

  const a = document.createElement('a');

  a.href = `/api2/equ/repairController/downExcel`;

  a.click();

}

2.文件批量上传

<Button type="primary" onClick={() => setUploadVisible(true)}>维护信息批量导入</Button>

<Modal

        open={uploadVisible}

        onCancel={() => setUploadVisible(false)}

        title="导入台账"

        footer={[

          <Button

            type="primary"

            onClick={() => {

              const a = document.createElement('a');

              a.href = '/api2/equ/repairController/downexample';

              a.click();

            }}

          >

            下载示例

          </Button>,

        ]}

      >

        <Upload.Dragger

          name="file"

          multiple={false}

          action="/api2/equ/repairController/uploadRepairFile"

          onChange={(info: any) => {

            const { status, response } = info.file;

            if (status === 'done') {

              if (response.success) {

                message.success(`${info.file.name} file uploaded successfully.`);

                actionRef.current?.reload();

                setUploadVisible(false);

              } else {

                message.error(response.errorMessage || '上传失败');

              }

            } else if (status === 'error') {

              message.error(`${info.file.name} file upload failed.`);

            }

          }}

        >

          <p className="ant-upload-drag-icon">

            <InboxOutlined />

          </p>

          <p className="ant-upload-text">点击上传</p>

          <p className="ant-upload-hint">

            请点击下方“下载示例”按钮下载示例后<br/>在示例excel的规范上填写维护信息进行上传！

          </p>

        </Upload.Dragger>

      </Modal>