antd 中组件Upload实现批量上传(单次请求)

react + antd 多文件上传
批量上传
单次请求
自定义上传

官方回答

2019 目前还不支持多文件单次上传。
2020/8 我们不能更改它，因为这将是一个中断更改。
2021/5 onChange 可以实现。(change实现多文件多次请求 且 上传中,上传失败,上传成功都会调用change)

甲、思路

beforeUpload里面只会更新一次state，然后监听state调接口并重置单例状态

乙、关键代码

  const fileState = useRef();
  // 存储files
  const [uploadFiles, setUploadFiles] = useState([]);
  const updateFiles = (function () {
    let fileList;
    return function (list, setState) {
      if (!fileList) {
        fileList = list;
        setState && setState(list);
      }
      return {
        fileList,
        reset() {
          fileList = false;
        }
      };
    };
  })();

  const beforeUpload = (_, fileList) => {
    fileState.current = updateFiles(fileList, setUploadFiles);
    return false;
  }
  const customRequest = () => {
    console.log("自定义上传", uploadFiles);
  };

  useEffect(() => {
    if (uploadFiles.length > 0) {
      customRequest();
      fileState.current.reset();
    }
  }, [uploadFiles]);

丙、实例传送

codesandbox.io