antd中Upload组件自定义上传文件

我的需求是，后端2个接口都需要这个文件的url，但是上传操作只能执行一次，那么如何做呢？

首先这个上传组件

  <Upload
    action={`${apiConfig?.prefix ?? '/'}${apiConfig.url}`}
    data={getDataFn}
    headers={{ Authorization: `Bearer ${getToken()}` }}
    onChange={handleUploadChange}
    fileList={fileLists}
    beforeUpload={file => checkFileType(file, mimeTypes)}
    showUploadList={loading}
    name="file"
  >

它有一个beforeUpload属性，上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传

上传时候，在beforeUpload方法里面，先把我们的文件给存起来

  /**
   * description 文件上传前判断文件类型
   */
  const checkFileType = (file, types = []) => {
    currentUpload.current = [file]; // 存到ref中
    if (types.length === 0) {
      return true;
    }
    /** 判断文件类型是否允许上传，比较类型不区分大小写 */
    const type = types.map(item => item.toLowerCase());
    const nameType = file.name
      .split('.')
      .pop()
      .toLowerCase();
    if (type.includes(nameType)) {
      setLoading(true);
      return true;
    }
    notification.error({
      message: `文件上传只支持${types.join(',')}类型`,
    });
    return false;
  };

当我们用第2个接口的时候

 const handleUpload = () => {
    const formData = new FormData();
    currentUpload.current.forEach(file => {
      //append主要是添加参数
      formData.append('file', file);
      formData.append('method', 'importPartyInfos');
      formData.append('params', '{}');
    });
    reqwest({
      url: '',
      method: 'post',
      processData: false,
      data: formData,
      headers: {
        Authorization: `Bearer ${getToken()}`,
      },
      success: res => {
      },
      error: () => {
        message.error('upload failed.');
      },
    });
  };

ok了，如果有不懂的可以私信我，我封装了一个专门自定义上传的组件