NextJS 中的 CldUploadWidget 无限加载微调器

Question

我正在尝试使用应用程序路由器使用 nextjs13 中的 next-cloudinary 包的 CldUploadWidget。 我创建了一个 ImageUpload 组件，用于显示从 cloudinary 中选择或检索的图像，以及使用 CldUploadWidget 的上传按钮。但是当我尝试打开上传小部件时，它只显示一个无限加载旋转器。

下面是我的ImageUpload组件代码：

"use client"

import { useEffect, useState } from "react";
import { Button } from "../ui/button";
import { ImagePlus, Trash } from "lucide-react";
import Image from "next/image";
import { CldUploadWidget } from "next-cloudinary";

const ImageUpload = ({
    disabled,
    onChange,
    onRemove,
    value
}) => {
    const [isMounted, setIsMounted] = useState(false);

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

    // const handleUpload = (result) => {
    //     onChange(result.info.secure_url);
    // }

    const handleUpload = (result) => {
        if (result.info.secure_url) {
            // Successful upload
            console.log("Upload successful. Secure URL:", result.info.secure_url);
        } else {
            // Handle the error
            console.error("Upload failed. Error message:", result.info.error.message);
        }
    };

    // If it is not mounted in server side return null
    if (!isMounted) {
        return null;
    }

    return (
        <div className="flex flex-col items-center justify-center gap-4">
            <div key={value} className="relative border-4 w-[300px] h-[300px] rounded-md overflow-hidden">
                {value && (
                    <div className="absolute z-10 top-2 right-2">
                        <Button type="button" onClick={() => onRemove(value)} variant="destructive" size="icon">
                            <Trash className="w-4 h-4" />
                        </Button>
                    </div>
                )}
                <Image
                    fill
                    className="object-cover"
                    alt="Image"
                    src={value ? value : '/images/avatar/avatar.jpg'}
                />
            </div>
            <CldUploadWidget
                options={{ maxFiles: 1, singleUploadAutoClose: true, sources: ["local"] }}
                onUpload={handleUpload}
                uploadPreset={process.env.CLOUDINARY_CLOUD_PRESET}
            >
                {({ open }) => {
                    const onClick = (e) => {
                        e.preventDefault();
                        open();
                    }

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

export default ImageUpload;

这是我的 next.config.js 文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        domains: [
            'res.cloudinary.com',
            'avatars.githubusercontent.com',
            'lh3.googleusercontent.com'
        ]
    }
}

module.exports = nextConfig

我尝试将预设键直接放在上传小部件中，但仍然不起作用

Answer 1

其实我自己也在处理这个问题。像个小丑一样，我还没有将 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="" 放入我的 .env 文件中。这也能解决您的问题吗？