React dropzone-uploader多文件上传时状态为aborted问题求解

问题根因 #

• 你将Dropzone的autoUpload属性设置为false但没有手动控制上传触发逻辑，且单文件校验通过就立即更新父组件状态，频繁的重渲染会重置Dropzone中未完成状态流转的文件，导致除第一个文件外其余全部被标记为aborted。
• onChangeStatus为异步函数但你没有返回明确的校验通过标识，react-dropzone-uploader默认会将未明确标记为有效状态的文件自动中止。
• 父组件的setState是异步操作，多次零散调用会导致状态合并异常，丢失部分文件记录。

修复方案 #

1. 调整文件校验逻辑，批量收集校验通过的文件 #

先通过onDrop回调记录本次选中的文件总数，待所有文件校验完成后再统一更新父组件状态，避免频繁重渲染：

import Dropzone from "react-dropzone-uploader";

// 存储本次选中的文件总数，也可以存到组件state中
let currentUploadFileCount = 0
// 临时存储已校验通过的文件
let validatedFiles = []

const handleDrop = (files) => {
  currentUploadFileCount = files.length
  validatedFiles = []
}

const handleChangeStatus = async (fileWithMeta, status) => {
  if(status === 'ready'){
    const file = fileWithMeta.file
    // 此处执行部分文件校验逻辑
    validatedFiles.push(file)
    // 所有文件校验完成后统一调用父组件方法
    if(validatedFiles.length === currentUploadFileCount) {
      someFunctionfromProps(validatedFiles);
      validatedFiles = []
      currentUploadFileCount = 0
    }
    // 返回true明确标记当前文件校验通过，避免被自动中止
    return true
  }
}

2. 调整Dropzone配置，绑定实例用于手动触发上传 #

给Dropzone添加ref属性，方便后续手动调用提交方法触发批量上传：

<Dropzone
  ref={dropzoneRef => this.dropzoneRef = dropzoneRef}
  getUploadParams={getUploadParam}
  onChangeStatus={handleChangeStatus}
  onDrop={handleDrop}
  accept={fileTypesFormats.types}
  autoUpload={false}
  multiple={true}
>
</Dropzone>

3. 调整父组件状态更新逻辑，状态更新完成后触发上传 #

父组件修改为接收批量文件，在状态更新的回调函数中手动触发所有文件上传：

someFunctionfromProps = async (newFiles) => {
  this.setState(prevState => ({
    files: [...prevState.files, ...newFiles],
  }), () => {
    // 状态更新完成后统一触发上传
    this.dropzoneRef?.submit()
  });
};

内容的提问来源于stack exchange，提问作者phpLover