Cloudinary 上传小部件不能处理超过 1 个图像

Question

我尝试使用 Cloudinary Upload Widget 上传多张照片。然而，它只处理单个图像。并且未能出现。但每个图像都上传到 Cloudinary.it 并且图像也没有进入表单值。值中仅显示 1 个图像。

小部件照片 形象照

          <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>
            )}
          />

 <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>

Answer 1

您需要将

multiple

参数添加为 true - 请参阅此处

options={{
  multiple: true,
}}

https://next.cloudinary.dev/clduploadwidget/configuration#options-1