React 文件上传实现

需求：只能导入pdf文件，文件导入后点击确定按钮调接口文件上传。

组件库： antd

 代码：

{/* 导入报告弹窗 */}
      <Modal
        width={360}
        className='report-modal'
        title="导入报告"
        maskClosable={false}
        visible={importReportVisible}
        onOk={importReportHandeOk}
        onCancel={changeImportReportVisible}
      >
        <Form className='report_box report_box_import' form={importReportForm} name="importReportForm">
          <Form.Item
            name="month"
            label="月份"
            rules={[{ required: true, message: '请选择生成月份' }]}
          >
            <Select
              placeholder='请选择月份'
              options={monthlyList}
            />
          </Form.Item>
          <Form.Item
            name="remark"
            label="备注"
          // rules={[{ required: true, message: '请填写备注信息' }]}
          >
            <Input.TextArea rows={2} placeholder='请输入备注信息' />
          </Form.Item>
          <Form.Item
            name="upload"
            label="导入文件"
            valuePropName="fileList"
            getValueFromEvent={(e) => {
              if (Array.isArray(e)) {
                return e;
              }
              return e && e.fileList;
            }}
            extra='支持扩展名: .pdf'
            rules={[{ required: true, message: '请导入文件' }]}
          >
            <Upload
              name="report"
              action={''} // 上传的地址
              accept='.pdf'
              maxCount={1}
              beforeUpload={beforeExportReport}
              onChange={exportReportChange}
            >
              <Button>导入</Button>
            </Upload>
          </Form.Item>
        </Form>
      </Modal>

// 导入报告
  const importReportHandeOk = () => {
    importReportForm.validateFields().then((value) => {
      const { month: belongDate, remark, upload } = value;
      const param = { brokerId, remark, belongDate, file: fileList };
      const formData = new FormData();
      for (const key in param) {
        formData.append(key, param[key] ?? '');
      }      
      fetch(myURL + '/report/upload', {
        method: 'POST',
        body: formData,
      }).then(res => {
        if (res.status === 200) {
          message.success('导入成功！');
        } else {
          message.error('导入失败！');
        }
      }).catch(() => {
        message.error('导入失败！');
      })
    }).catch(err => console.log(err));
  };

遇到的问题：

使用axios进行请求的时候后端一直获取不到formData的值，网上看了很多方法，设置请求头也不生效，但是当我将withCredentials设置为true的时候，可以获取到formData的值，这时候又出现了另一个问题就是跨域，需要后端同学去修改。（withCredentials使用效果可参考：ajax中的withCredentials使用效果_江木的博客-CSDN博客_withcredentials)

所以我改用fetch请求去实现，达到了想要的效果