Antd Upload组件上传完成后如何获取action接口返回的API响应数据？

首先明确：不需要强制自定义请求，两种实现路径可选，按需选择即可。

方案1：通过onChange回调直接获取URL（无需自定义请求） #

Antd Upload组件自带的上传逻辑已经会自动挂载接口返回值到文件对象的response字段中，上传成功后直接从该字段取值即可。

• 核心逻辑：监听onChange事件，当文件状态变为done时，从file.response中读取Cloudinary返回的url字段
• 示例代码：

import { Upload, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

const ImageUpload = () => {
  const handleUploadChange = (info) => {
    // 上传完成状态判断
    if (info.file.status === 'done') {
      // 直接从响应中取Cloudinary返回的文件URL
      const cloudinaryUrl = info.file.response.url;
      console.log('上传完成的文件URL：', cloudinaryUrl);
      message.success('图片上传成功');
      // 此处可执行后续逻辑，比如把URL存到表单、提交后端等
    } else if (info.file.status === 'error') {
      message.error('图片上传失败');
    }
  };

  return (
    <Upload
      name="file"
      action="https://api.cloudinary.com/v1_1/你的Cloudinary名称/image/upload"
      // 上传必填的额外参数，根据Cloudinary配置填写，比如unsigned上传的upload_preset
      data={{ upload_preset: '你的预设名称' }}
      onChange={handleUploadChange}
      listType="picture-card"
    >
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>上传图片</div>
      </div>
    </Upload>
  );
};

方案2：自定义请求实现（适用于需要精细控制上传逻辑的场景） #

如果你需要自定义请求头、加签名校验、处理特殊的上传逻辑，可以通过Upload的customRequest属性自行编写上传请求，完成后直接从响应中取URL即可。

• 示例代码：

import { Upload, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import axios from 'axios';

const ImageUpload = () => {
  const customUploadRequest = async (options) => {
    const { file, onSuccess, onError } = options;
    const formData = new FormData();
    formData.append('file', file);
    formData.append('upload_preset', '你的预设名称');

    try {
      const res = await axios.post(
        'https://api.cloudinary.com/v1_1/你的Cloudinary名称/image/upload',
        formData,
        { headers: { 'Content-Type': 'multipart/form-data' } }
      );
      // 上传成功回调，返回的响应会自动挂载到file.response中
      onSuccess(res.data, file);
      // 直接在这里取URL也可以
      const cloudinaryUrl = res.data.url;
      console.log('上传完成的文件URL：', cloudinaryUrl);
    } catch (err) {
      onError(err);
      message.error('上传失败');
    }
  };

  return (
    <Upload
      name="file"
      customRequest={customUploadRequest}
      listType="picture-card"
    >
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>上传图片</div>
      </div>
    </Upload>
  );
};

注意事项 #

• Cloudinary如果使用未签名上传，需要提前在后台配置对应的upload_preset，开启未签名上传权限
• 正式环境建议使用签名上传，避免资源泄露，签名逻辑可以写在自定义请求中，或者请求自己的后端接口转发上传请求

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