Ant Design Upload组件上传成功后仍显示加载spinner且无进度显示

你遇到的核心问题是：使用AntD Upload的customRequest自定义上传逻辑时，没有手动通知组件更新文件的上传状态，导致附件列表中的文件一直处于「上传中」状态，Spinner持续转动；同时缺少进度回调，所以无法显示上传进度。

问题根源 #

AntD Upload组件在使用默认上传逻辑时会自动管理文件状态，但使用customRequest后，组件将状态控制权完全交给开发者，必须手动调用组件提供的回调函数来更新文件的上传状态（成功/失败）、传递进度数据。你的代码只处理了按钮的loading状态，没有触发这些关键回调。

修正后的完整代码 #

import { useState } from 'react';
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const PDFUploader = () => {
  const [uploading, setUploading] = useState(false);

  const handleFileChange = (info) => {
    if (info.file.status !== "uploading") {
      console.log(info.file, info.fileList);
    }

    if (info.file.status === "done") {
      message.success(`${info.file.name} 文件上传成功`);
      setUploading(false);
    } else if (info.file.status === "error") {
      message.error(`${info.file.name} 文件上传失败`);
      setUploading(false);
    }
  };

  const beforeUpload = (file) => {
    const isPdf = file.type === "application/pdf";
    if (!isPdf) {
      message.error("只能上传PDF文件！");
    }
    return isPdf;
  };

  const uploadFile = (file, onSuccess, onError, onProgress) => {
    setUploading(true);
    
    // 模拟上传进度（可选，用于显示进度条）
    let progress = 0;
    const progressTimer = setInterval(() => {
      progress += 10;
      onProgress({ percent: progress });
      if (progress >= 100) clearInterval(progressTimer);
    }, 200);

    // 替换为真实接口请求逻辑
    setTimeout(() => {
      try {
        // 上传成功时调用onSuccess，通知组件更新文件状态为done
        onSuccess(null, file);
      } catch (err) {
        // 上传失败时调用onError，通知组件更新文件状态为error
        onError(err);
      } finally {
        setUploading(false);
      }
    }, 2000);
  };

  return (
    <Upload
      accept=".pdf"
      beforeUpload={beforeUpload}
      customRequest={({ file, onSuccess, onError, onProgress }) => {
        uploadFile(file, onSuccess, onError, onProgress);
      }}
      onChange={handleFileChange}
    >
      <Button icon={<UploadOutlined />} loading={uploading}>
        {uploading ? "上传中" : "上传PDF"}
      </Button>
    </Upload>
  );
};

export default PDFUploader;

关键修改点 #

• 接收组件回调：在customRequest中获取AntD提供的onSuccess、onError、onProgress回调，这是通知组件更新状态的核心入口
• 触发状态更新：上传成功后调用onSuccess，失败时调用onError，让组件自动将文件状态从uploading改为done/error，停止Spinner
• 添加进度支持：通过onProgress传递进度百分比，让组件显示上传进度条
• 真实上传适配：如果对接真实后端接口，只需把setTimeout内的逻辑替换为axios/fetch请求，请求成功调用onSuccess，失败调用onError即可

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