Next.js13 App Router中CldUploadWidget无限加载转圈问题求助

以下是针对你遇到的CldUploadWidget弹窗无限加载问题的排查和解决方案：

1. 检查Cloudinary基础配置 #

• 添加云名称环境变量：在项目根目录的.env.local文件中配置Cloudinary云名称（可在Cloudinary控制台仪表盘顶部获取）：

  NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=你的云名称
  

2. 验证上传预设（Upload Preset） #

• 替换占位符：将代码中的<Upload Preset>替换为Cloudinary控制台中创建的实际上传预设名称。
• 确认预设模式：
  • 若使用无签名模式：确保预设的"Mode"设置为"Unsigned"，无需配置signatureEndpoint。
  • 若使用签名模式：取消注释signatureEndpoint，并确保后端API路由正确生成签名（参考下方示例）。

3. 配置签名端点（签名上传模式专用） #

创建API路由app/uploads/signature/route.ts生成签名：

import { v2 as cloudinary } from 'cloudinary';
import { NextResponse } from 'next/server';

cloudinary.config({
  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

export async function POST(request: Request) {
  const { timestamp } = await request.json();
  const signature = cloudinary.utils.api_sign_request(
    { timestamp },
    process.env.CLOUDINARY_API_SECRET!
  );
  return NextResponse.json({ signature, timestamp });
}

同时在.env.local中添加API密钥：

CLOUDINARY_API_KEY=你的API密钥
CLOUDINARY_API_SECRET=你的API密钥

4. 获取上传后的public_id和url #

修改onUpload函数提取所需信息：

const onUpload = (response: UploadApiResponse) => {
  const { public_id, secure_url } = response;
  console.log('Public ID:', public_id);
  console.log('图片URL:', secure_url);
  // 可将数据存入状态或发送至后端
};

5. 其他排查项 #

• 更新依赖：确保next-cloudinary为最新版本，执行：

  npm update next-cloudinary
  

• CORS配置：在Cloudinary控制台「设置」→「安全」→「允许的来源」中添加应用域名（如http://localhost:3000）。
• 查看控制台错误：打开浏览器开发者工具「控制台」标签，确认是否有权限、配置缺失等具体错误信息。

内容的提问来源于stack exchange，提问作者Louis Marie