React+NextJS项目Cloudinary多图上传功能失效求助

问题根源 #

当Cloudinary上传组件开启multiple: true后，onSuccess回调会返回包含所有上传文件结果的数组，而非单个对象。现有代码仅处理了单个结果，导致多图上传时仅能添加最后一张图片。

修复步骤 #

1. 修改ImageUpload组件的回调处理逻辑 #

遍历上传结果数组，逐个调用onChange添加图片：

// image-upload.tsx 中修改onUpload函数
const onUpload = (results: any) => {
  // 处理多文件上传的结果数组
  if (Array.isArray(results)) {
    results.forEach(result => {
      onChange(result.info.secure_url);
    });
  } else {
    // 兼容单文件上传场景
    onChange(results.info.secure_url);
  }
};

2. 确认Cloudinary上传预设配置 #

检查上传预设djrccgni是否允许多文件上传：

• 登录Cloudinary控制台，进入「设置 > 上传」
• 找到对应预设，确保「允许多文件上传」选项已启用

3. 验证表单字段更新逻辑 #

确保ProductForm中的onChange逻辑能正确累加数组（现有代码无需修改，仅确认逻辑）：

// product-form.tsx 中ImageUpload的配置
<ImageUpload
  value={field.value.map((image) => image.url)}
  disabled={loading}
  onChange={(url) => field.onChange([...field.value, {url}])}
  onRemove={(url) => field.onChange(field.value.filter((current) => current.url !== url))}
/>

额外优化建议 #

• 为onUpload添加类型定义，避免any类型：

import type { CldUploadWidgetResults } from 'next-cloudinary';

const onUpload = (results: CldUploadWidgetResults) => {
  // 逻辑同上
};

• 添加上传状态提示，提升用户体验

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