如何结合Ant Design的Upload组件使用Cloudinary实现图片上传？

算力阿峰

2026-10-5

报错根因与修复方案

1. 直接报错原因

Ant Design Upload 组件的 customRequest 属性要求接收函数类型的值，组件内部会直接调用该函数执行自定义上传逻辑。你当前给 customRequest 传的是 { serverUpload } 这样的对象结构，组件调用时识别不到可执行的函数，就会抛出 request is not a function 错误。

2. 修复步骤

第一步：修正 customRequest 赋值

修改 uploadProps 里的 customRequest 配置，直接传入函数本身，去掉外层对象包裹：

const uploadProps = {
  name: "file",
  customRequest: serverUpload, // 直接传函数，不要外层{}
  onChange(info) {
    // 原有逻辑保持不变
  },
  // 其余配置保持不变
};

第二步：修正 serverUpload 内部逻辑

你当前的上传逻辑存在两个无效问题：

提前 await Promise.all([]) 空数组，后续往 result 中 push 请求不会被等待执行
customRequest 会针对每个选中的文件单独触发一次，不需要遍历整个已选文件列表，直接处理当前传入的单文件即可

修正后的 serverUpload 代码：

const serverUpload = async (options) => {
  const { onSuccess, file, onError } = options;
  try {
    const formData = new FormData();
    formData.append("file", file);
    formData.append("upload_preset", cloudinaryInfo.CLOUDINARY_UPLOAD_PRESET);
    // 上传当前单个文件
    const uploadResult = await axios.post(cloudinaryInfo.CLOUDINARY_IMAGE_UPLOAD_URL, formData);
    // 把Cloudinary返回的资源信息传给onSuccess，后续可以直接从文件列表的response字段取
    onSuccess(uploadResult.data, file);
  } catch (err) {
    console.log(err);
    onError(err);
  }
};