Angular中不使用Cloudinary SDK调用Post API传图遇401错误求助

你遇到的401错误主要来自三个核心问题：API端点错误、缺少必要的认证参数，以及请求格式不符合Cloudinary的要求。我来一步步帮你修正：

1. 修正API端点URL #

你当前的URL https://api.cloudinary.com/v1_1/image/upload/ 是错误的，Cloudinary的上传API结构是：
https://api.cloudinary.com/v1_1/{你的云名称}/{资源类型}/upload

• 把 image 替换成你在Cloudinary控制台获取的云名称（比如你的账号云名称是 my-test-cloud，那URL就是 https://api.cloudinary.com/v1_1/my-test-cloud/image/upload）
• image 是资源类型（如果上传的是图片，这个没问题；视频的话换成 video）

2. 配置认证参数（无签名上传，适合新手） #

Cloudinary不允许无认证的上传，对于前端直接上传，最简单的方式是用无签名上传预设：

• 登录Cloudinary控制台，进入「设置」→「上传」→「上传预设」
• 创建一个新的上传预设，把「签名模式」设置为「无签名」
• 同时记下你的 API Key（在控制台「仪表板」可以找到）

3. 修改请求格式（用FormData传递文件） #

你之前用Data URL传递文件的方式不对，Cloudinary的上传API接受multipart/form-data格式的请求，直接用FormData封装文件即可，不需要自己转Blob字符串。

修改后的完整代码 #

uploadImage(event) {
  const file = event.srcElement.files[0];
  if (!file) return;

  const formData = new FormData();
  // 添加上传文件
  formData.append('file', file);
  // 添加你的API Key
  formData.append('api_key', '你的Cloudinary API Key');
  // 添加无签名上传预设名称
  formData.append('upload_preset', '你的无签名上传预设名称');

  this.http.post('https://api.cloudinary.com/v1_1/你的云名称/image/upload', formData)
    .subscribe(
      res => {
        console.log('上传成功！', res);
        // 这里可以获取图片地址：res.secure_url
      },
      error => {
        console.error('上传失败', error);
      }
    );
}

为什么之前的代码会报错？ #

• 401未授权：因为你的API URL里的云名称错误，加上没有传递API Key或上传预设，Cloudinary无法识别你的账户，所以返回未授权。
• 请求格式错误：你用JSON格式传递了Data URL字符串，但Cloudinary需要的是multipart/form-data格式的文件流，这也是导致请求不被识别的原因之一。

如果之后需要更安全的上传方式（比如控制上传权限），可以考虑用后端生成签名、timestamp等参数，再传递给前端进行上传，但无签名上传足够满足新手的基础需求。

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