Next.js中Cloudinary多图上传异常问题求助

问题根源 #

1. 未启用多选模式：默认CldUploadWidget不支持批量选择图片，需显式配置多选参数。
2. 单结果回调逻辑：原onUpload函数仅处理单个上传结果，未适配批量上传返回的数组格式。

修改方案 #

1. 更新ImageUpload组件 #

调整组件以支持多选上传，并正确处理批量上传结果：

"use client";

import { CldUploadWidget } from 'next-cloudinary';
import { useEffect, useState } from 'react';

import { Button } from '@/components/ui/button';
import Image from 'next/image';
import { ImagePlus, Trash } from 'lucide-react';

interface ImageUploadProps {
  disabled?: boolean;
  onChange: (value: string) => void;
  onRemove: (value: string) => void;
  value: string[];
}

const ImageUpload: React.FC<ImageUploadProps> = ({
  disabled,
  onChange,
  onRemove,
  value
}) => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  // 兼容单张/批量上传结果
  const onUpload = (result: any) => {
    if (Array.isArray(result)) {
      // 批量上传时遍历所有结果
      result.forEach(item => onChange(item.info.secure_url));
    } else {
      // 单张上传处理
      onChange(result.info.secure_url);
    }
  };

  if (!isMounted) {
    return null;
  }

  return ( 
    <div>
      <div className="mb-4 flex items-center gap-4">
        {value.map((url) => (
          <div key={url} className="relative w-[200px] h-[200px] rounded-md overflow-hidden">
            <div className="z-10 absolute top-2 right-2">
              <Button type="button" onClick={() => onRemove(url)} variant="destructive" size="sm">
                <Trash className="h-4 w-4" />
              </Button>
            </div>
            <Image
              fill
              sizes=''
              className="object-cover"
              alt="Image"
              src={url}
            />
          </div>
        ))}
      </div>
      {/* 开启多选模式 */}
      <CldUploadWidget 
        onSuccess={onUpload} 
        uploadPreset="ox48luzl"
        options={{ multiple: true }}
      >
        {({ open }) => {
          const onClick = () => {
            open();
          };

          return (
            <Button 
              type="button" 
              disabled={disabled} 
              variant="secondary" 
              onClick={onClick}
            >
              <ImagePlus className="h-4 w-4 mr-2" />
              Upload Images
            </Button>
          );
        }}
      </CldUploadWidget>
    </div>
  );
}
 
export default ImageUpload;

2. 父组件验证 #

你的ProductForm组件中onChange的数组追加逻辑已经正确，无需修改：

onChange={(url) => field.onChange([...field.value, { url }])}

该逻辑会自动将所有新上传的图片URL添加到表单的图片数组中。

关键修改说明 #

• 启用多选：通过options={{ multiple: true }}配置上传组件，允许一次性选择多张图片。
• 批量结果处理：在onUpload中判断返回结果类型，遍历批量上传的所有项，确保每张图片的URL都被正确添加到表单值中。

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