NextJS 13（App Router）中CldUploadWidget无限加载问题求助

以下是针对你遇到的无限加载问题的排查和修复步骤：

1. 补全Cloudinary核心配置 #

next-cloudinary的上传组件需要两个关键环境变量，你目前只配置了上传预设，缺少云名称会导致组件初始化失败：

• 在项目根目录的.env.local文件中添加：

CLOUDINARY_CLOUD_NAME=你的Cloudinary云名称
CLOUDINARY_UPLOAD_PRESET=你的上传预设

• 修改组件中CldUploadWidget的props，显式传递云名称（或者组件会自动读取环境变量，显式传递更稳妥）：

<CldUploadWidget
    cloudName={process.env.CLOUDINARY_CLOUD_NAME}
    options={{ maxFiles: 1, singleUploadAutoClose: true, sources: ["local"] }}
    onUpload={handleUpload}
    uploadPreset={process.env.CLOUDINARY_UPLOAD_PRESET}
>

2. 确认上传预设的权限设置 #

前端直接上传必须使用**未签名（Unsigned）**的上传预设，签名预设会导致权限验证失败：

• 登录Cloudinary后台，进入设置 > 上传页面
• 找到对应的上传预设，检查签名模式是否为Unsigned，如果是Signed则修改为Unsigned

3. 简化客户端组件渲染逻辑 #

你当前的isMounted状态判断完全可以去掉，因为"use client"标记的组件在NextJS13 App Router中只会在客户端渲染，不需要额外的挂载判断：
删掉以下代码：

const [isMounted, setIsMounted] = useState(false);

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

if (!isMounted) {
    return null;
}

4. 排查资源加载与安全策略限制 #

• 打开浏览器开发者工具的网络标签，点击上传按钮后，检查是否成功加载https://widget.cloudinary.com/v2.0/global/all.js脚本，如果加载失败，检查网络连接或防火墙设置。
• 如果项目配置了内容安全策略（CSP），需要允许Cloudinary的脚本资源，修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        domains: [
            'res.cloudinary.com',
            'avatars.githubusercontent.com',
            'lh3.googleusercontent.com'
        ]
    },
    headers: async () => {
        return [
            {
                source: '/(.*)',
                headers: [
                    {
                        key: 'Content-Security-Policy',
                        value: "script-src 'self' https://widget.cloudinary.com;"
                    }
                ]
            }
        ]
    }
}

module.exports = nextConfig

5. 添加错误捕获调试 #

给CldUploadWidget添加错误回调，同时完善上传结果的处理，便于定位问题：

<CldUploadWidget
    cloudName={process.env.CLOUDINARY_CLOUD_NAME}
    options={{ maxFiles: 1, singleUploadAutoClose: true, sources: ["local"] }}
    onUpload={handleUpload}
    onError={(error) => {
        console.error("上传组件错误:", error);
    }}
    uploadPreset={process.env.CLOUDINARY_UPLOAD_PRESET}
>

打开浏览器控制台，查看是否有环境变量未定义、权限错误等具体报错信息。

内容的提问来源于stack exchange，提问作者Ronald Vergel Dela Cruz