Cloudinary Upload Widget多图上传异常：仅单张写入表单值求助

问题现象 #

使用Cloudinary Upload Widget上传多张图片时，所有图片均已成功上传至Cloudinary，但界面仅显示单张图片，表单的images字段值中也仅能看到一张图片，其余图片未写入表单值。

相关截图 #

• 上传Widget界面：
• 图片显示界面：

现有代码 #

表单字段部分 #

<FormField
  control={form.control}
  name="images"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Product Image</FormLabel>
      <h3>{field.value.length}</h3>
      <FormControl>
        <ImageUpload
          value={field.value.map((image) => image.url)}
          disabled={loading}
          onChange={(url) =>
            field.onChange([...field.value, { url }])
          }
          onRemove={(url) =>
            field.onChange([
              ...field.value.filter((image) => image.url !== url),
            ])
          }
        />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

ImageUpload组件部分 #

<div className="mb-4 flex items-center gap-4">
  {value.map((url) => (
    <div
      key={url}
      className="relative size-[200px] overflow-hidden rounded-md"
    >
      <div className="absolute right-2 top-2 z-10">
        <Button
          type="button"
          onClick={() => onRemove(url)}
          variant="destructive"
          size="icon"
        >
          <Trash className="size-4" />
        </Button>
      </div>
      <Image
        className="object-cover"
        src={url}
        alt="Image"
        width={200}
        height={200}
      />
    </div>
  ))}
</div>
<CldUploadWidget uploadPreset="u3lcombs" onSuccess={onUpload}>
  {({ open }) => {
    const onClick = () => {
      open();
    };

    return (
      <Button
        type="button"
        disabled={disabled}
        variant="secondary"
        onClick={onClick}
      >
        <ImagePlus className="mr-2 size-4" />
        Upload an Image
      </Button>
    );
  }}
</CldUploadWidget>
</div>

问题原因 #

核心问题在于**onUpload函数未处理批量上传场景**：当通过Widget一次性上传多张图片时，Cloudinary的onSuccess回调会返回包含所有上传成功文件信息的数组，但现有代码仅处理单个元素，导致每次仅添加一张图片到表单中。同时当前onChange方法仅支持接收单个URL，无法批量处理多图上传结果。

解决方案 #

1. 完善onUpload函数，处理批量上传结果 #

在ImageUpload组件内部修改onUpload逻辑，遍历所有上传成功的文件：

const onUpload = (result) => {
  // 统一处理单文件/多文件上传结果
  const uploadedFiles = Array.isArray(result.info) ? result.info : [result.info];
  // 提取所有图片的安全URL
  const newUrls = uploadedFiles.map(file => file.secure_url);
  // 传递给onChange批量处理
  onChange(newUrls);
};

2. 修改onChange方法，支持批量添加URL #

在表单的ImageUpload调用处，更新onChange逻辑以支持数组类型的URL输入：

<ImageUpload
  value={field.value.map((image) => image.url)}
  disabled={loading}
  onChange={(urls) => {
    // 统一转为数组处理
    const urlArray = Array.isArray(urls) ? urls : [urls];
    // 批量添加到表单字段
    field.onChange([
      ...field.value,
      ...urlArray.map(url => ({ url }))
    ]);
  }}
  onRemove={(url) =>
    field.onChange([
      ...field.value.filter((image) => image.url !== url),
    ])
  }
/>

3. 开启Widget多选上传（可选） #

如果Widget默认未开启多选，添加multiple: true配置：

<CldUploadWidget 
  uploadPreset="u3lcombs" 
  onSuccess={onUpload}
  options={{ multiple: true }}
>
  {/* 按钮代码保持不变 */}
</CldUploadWidget>

修改完成后，无论单次上传一张还是多张图片，都能正确将所有图片URL写入表单字段，并在界面上显示全部上传的图片。

内容的提问来源于stack exchange，提问作者Ashfak Hossain Evan