Antd的Upload组件上传文件控制文件数量、格式等，以及提交时如何获取文件

背景：使用React的antd组件的Upload（官网），要求文件上传后，在点击提交时再将文件传过去。

技术点：

1. 完全控制的文件上传。
2. 可控制上传数量。
3. 控制文件格式。
4. 移除时的事件onRemove。
5. 状态、数量改变onChange事件等。
6. 是否带cookie，withCredentials: true。
7. 提交时，originFileObj属性获取原始文件。

页面大致是这样：

Upload代码如下：

const [fileList, setFileList] = useState([]);
// upload属性
const uploadProps = {
    name: 'file',
    action: getFullUrl('/card/upload'),
    withCredentials: true, // 文件上传时带cookie
    onChange: handleChange,
    onRemove: handleReset, // 点击文件后的小垃圾桶图标，移除
    beforeUpload: (file) => {
      const { name } = file;
      // 校验是否是excel文件
      const isExcel = /(xls|xlsx)$/i.test(name);
      if (!isExcel) {
        message.error(I18n.get('batch.card.upload.excel'));
      }
      // 自定义属性
      file.isExcel = isExcel;
      return isExcel;
    },
  };
// return中渲染：
<Upload {...uploadProps} fileList={fileList}>
    <Button>
      <Icon type="upload" />点击上传
    </Button>
 </Upload>

防止一次代码太长，分开写，处理函数可以根据具体需求定义。 上面代码中的具体函数：

 const handleChange = ({ file, fileList }) => {
    try {
      const { status, response } = file;
      // 刚才的子定义属性，是否是Excel文件，通过校验
      if (!file.isExcel) {
        return;
      }
      // 只能上传一个文件,不能用flie直接设置，onRemove函数会触发handleChange
      setFileList(fileList.slice(-1));
      if (status === 'error') {
        throw new Error('上传失败');
      }
      if (status === 'done' && response) {
        const { code } = response;
        // ...
      }
    } catch (e) {
      message.error(e.message);
    }
  };
  // 这里是只有一个文件，移除即清空文件列表
  const handleReset = () => {
    setFileList([]);
  };
 // 点击提交，formData的形式传参
  const handleSubmit = async () => {
    try {
      const formData = new FormData();
      formData.append('file', fileList[0].originFileObj);
      const res = await submitBatchFile(formData);
      const { code } = res;
      if (code !== '000000') {
        throw new Error('提交失败');
      }
      message.success('提交成功');
    } catch (e) {
      console.error(e);
      message.error(e.message);
    }
  };