Ant Design Dragger上传文件时onChange无法获取当前文件thumbUrl问题

使用Ant Design的Dragger组件上传图片时，当前刚上传的文件无法获取thumbUrl字段，但此前上传的文件可正常获取该字段。因需要base64格式图片用于展示，尝试多种方法仍未解决。

相关代码：

import {Upload} from 'antd';

const { Dragger } = Upload;

function Add(props){
  const {form} = props;
  const draggerProps = {
    listType: 'picture',
    name: 'file',
    multiple: true,
    maxCount: 5,
    accept: 'image/*',
    beforeUpload() {
      return false;
    },
    onChange(info) {
      const { fileList,file } = info;
      console.log(file, fileList, 'fileList');
      form.setFieldsValue({ images: fileList });
      console.log(form.getFieldsValue(), 'form');
    }
  }
  return(
    <>
      <div className="image-upload-container-wrapper">
        <Dragger {...draggerProps}>
          <p className="ant-upload-drag-icon">
            <img src={FieldImagePlaceholder} alt="Field Placeholder" />
          </p>
          <p className="ant-upload-text">
            <span className="dragger-text-blue">Select</span> or Drag and Drop Images
          </p>
        </Dragger>
      </div>
    </>
  );
}
export default Add;

控制台表现 #

• 首次上传：刚上传的文件对象中thumbUrl为undefined
• 后续上传：之前上传的文件已存在thumbUrl，但刚上传的新文件仍无该字段

问题根源是beforeUpload直接返回false，阻断了Ant Design内部生成thumbUrl的逻辑（该逻辑会在文件预上传阶段生成base64缩略图）。以下是三种可行修复方案：

方案1：手动生成base64作为thumbUrl #

在onChange中对状态为ready且无thumbUrl的文件，手动转换为base64并更新fileList：

onChange(info) {
  let { fileList } = info;
  // 遍历文件列表，为新上传的文件生成thumbUrl
  fileList = fileList.map(file => {
    if (file.status === 'ready' && !file.thumbUrl && file.originFileObj) {
      const reader = new FileReader();
      reader.onload = (e) => {
        // 更新文件的thumbUrl并重新设置表单字段
        file.thumbUrl = e.target.result;
        form.setFieldsValue({ images: [...fileList] });
      };
      reader.readAsDataURL(file.originFileObj);
    }
    return file;
  });
  form.setFieldsValue({ images: fileList });
}

方案2：调整beforeUpload的返回值 #

将beforeUpload改为返回空Promise，既保留内部thumbUrl生成逻辑，又阻止自动上传：

beforeUpload() {
  return new Promise(() => {});
}

同时在onChange中将文件状态从uploading改为ready：

onChange(info) {
  let { fileList } = info;
  fileList = fileList.map(file => {
    if (file.status === 'uploading') {
      return { ...file, status: 'ready' };
    }
    return file;
  });
  form.setFieldsValue({ images: fileList });
}

方案3：使用customRequest接管上传流程 #

配置customRequest替代beforeUpload，完全控制上传行为的同时保留内部缩略图生成：

const draggerProps = {
  // ...原有配置
  customRequest: ({ onSuccess }) => {
    // 不执行实际上传，直接标记成功
    setTimeout(() => onSuccess('success'), 0);
  },
  onChange(info) {
    const { fileList } = info;
    form.setFieldsValue({ images: fileList });
  }
}

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