使用ng2-file-upload上传至Cloudinary遇401，求cloudinary-ng示例及参数

问题核心原因 #

你遇到的401错误是因为Cloudinary上传请求缺少必要的授权验证参数，旧版直接在URL拼接参数的方式已被弃用，新版需要通过additionalParameter传递验证参数或使用签名机制。

方案1：无签名上传（开发/测试场景） #

适合不需要严格权限控制的场景，需先在Cloudinary控制台创建并启用无签名上传预设：

import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';
import { Cloudinary } from '@cloudinary/angular-5.x'; // 按实际安装的包版本调整

@Component({
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html'
})
export class ImageUploadComponent {
  uploader: FileUploader;
  readonly maxFileSize = 100 * 1024 * 1024; // 100MB

  constructor(private cloudinary: Cloudinary) {
    this.uploader = new FileUploader({
      url: `https://api.cloudinary.com/v1_1/${this.cloudinary.config().cloudName}/upload`,
      isHTML5: true,
      removeAfterUpload: false,
      autoUpload: false,
      maxFileSize: this.maxFileSize,
      additionalParameter: {
        upload_preset: '你的无签名上传预设名称', // 必须在Cloudinary控制台配置
        resource_type: 'image', // 替代你原有的MediaType，指定资源类型
        // 可选参数：folder（指定存储文件夹）、tags（添加标签）等
      }
    });

    // 监听上传结果
    this.uploader.onSuccessItem = (item, response) => {
      const uploadResult = JSON.parse(response);
      console.log('上传成功，图片地址:', uploadResult.secure_url);
    };

    this.uploader.onErrorItem = (item, response, status) => {
      console.error('上传失败:', status, JSON.parse(response));
    };
  }
}

方案2：签名上传（生产环境推荐） #

生产环境需使用签名验证，避免暴露敏感密钥，需后端配合生成签名参数（api_key、timestamp、signature）：

import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';
import { Cloudinary } from '@cloudinary/angular-5.x';
import { HttpClient } from '@angular/common/http';

// 定义后端返回的签名参数结构
interface CloudinarySignParams {
  api_key: string;
  timestamp: number;
  signature: string;
}

@Component({
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html'
})
export class ImageUploadComponent {
  uploader: FileUploader;
  readonly maxFileSize = 100 * 1024 * 1024; // 100MB

  constructor(
    private cloudinary: Cloudinary,
    private http: HttpClient
  ) {
    // 从后端获取签名参数
    this.http.get<CloudinarySignParams>('/your-backend-api/cloudinary/sign')
      .subscribe(signParams => {
        this.uploader = new FileUploader({
          url: `https://api.cloudinary.com/v1_1/${this.cloudinary.config().cloudName}/upload`,
          isHTML5: true,
          removeAfterUpload: false,
          autoUpload: false,
          maxFileSize: this.maxFileSize,
          additionalParameter: {
            ...signParams, // 传入后端生成的签名参数
            resource_type: 'image',
            // 其他自定义参数
          }
        });

        // 监听上传状态
        this.uploader.onSuccessItem = (item, response) => {
          console.log('上传成功:', JSON.parse(response));
        };
      });
  }
}

关键注意事项 #

• 无签名上传预设需在Cloudinary控制台的「设置→上传→上传预设」中创建，确保勾选「允许无签名上传」。
• 签名上传的签名必须由后端生成，签名算法需使用Cloudinary的API密钥（不可暴露在前端）。
• resource_type是Cloudinary的标准参数，支持image、video、raw三种类型，替代你原有的MediaType字段。

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