React中ANTD Upload.Dragger组件onChange事件触发两次问题求助

云上老周

2026-9-25

问题根因

Ant Design 的 Upload 及 Dragger 组件的 onChange 回调设计为文件上传状态每次变更时都会触发：

第一次触发：文件被选中/拖拽进入上传队列，状态变为 uploading
第二次触发：上传请求执行完成，状态变为 done（成功）或 error（失败）
你当前的代码未对文件状态做过滤，每次触发回调都会执行上传逻辑，因此出现重复触发的问题。

修复方案

方案1： onChange 增加状态过滤

仅在文件进入上传队列的 uploading 状态时执行一次上传逻辑：

const onFileChanged = async image => {
  // 非上传中状态直接跳过，避免重复执行
  if (image.file.status !== 'uploading') return
  if (isDenied(image?.type)) {
    return onNotifyDenied()
  }
  await dispatch(uploadAttachment(image.file))
}

方案2：上传逻辑迁移到 customRequest （更推荐）

你已经配置了 customRequest 自定义上传方法，上传逻辑本就应该放在此处，onChange 仅用来处理状态提示、表单值同步即可，从根源避免重复触发：

// customRequest 绑定的方法内处理上传逻辑
const onSuccess = async (options) => {
  const { file, onSuccess, onError } = options
  if (isDenied(file.type)) {
    onNotifyDenied()
    onError(new Error('文件类型不合法'))
    return
  }
  try {
    await dispatch(uploadAttachment(file))
    onSuccess('上传完成')
  } catch (err) {
    onError(err)
  }
}

// onChange 仅处理状态反馈即可
const onFileChanged = (image) => {
  if (image.file.status === 'done') {
    message.success('主图上传成功')
  } else if (image.file.status === 'error') {
    message.error('主图上传失败')
  }
}