如何使用 Cloudinary/Angular(5) 和 Ionic(3) 将图像作为签名请求上传？

Question

Cloudinary 有一个 basic.js 示例，我正试图在我的 Ionic/Angular 项目中实现它。

问题是，出于某种原因，“@cloudinary/angular-5.x”的 Ionic 版本始终使用 unsigned_upload 功能，我希望能够在 之前对其进行转换我上传了，跟Cloudinary的例子一样

转换需要signed上传而不是unsigned上传。

因为有很多版本，而且大多数例子都不行，我的是：

Ionic: 3
Angular: 5.2.11

Cloudinary: 
"cloudinary": "^1.11.0",
"cloudinary-core": "^2.5.0",
"@cloudinary/angular-5.x": "^1.0.2"

basic.js

我的配置在 .env 变量中，具有 cloudinary.config

中提到的结构

var dotenv = require('dotenv');
dotenv.load();

var fs = require('fs');
var cloudinary = require('cloudinary').v2;

// set your env variable CLOUDINARY_URL or set the following configuration
/*cloudinary.config({
  cloud_name: '',
  api_key: '',
  api_secret: ''
});*/

var url = "http://res.cloudinary.com/demo/image/upload/couple.jpg"
cloudinary.uploader.upload(url,{"tags":"basic_sample","width":500,"height":500,"crop":"fit","effect":"saturation:-70"} ,
  function(err,image){
   if (err){ 
    console.warn(err);
    return;
   }

   console.log("* "+image.public_id);
   console.log("* "+image.url);

   // Transform image
   cloudinary.url(image.public_id, 
    {
      width: 200,
      height: 150,
      crop: "fill",
      gravity: "face",
      radius: 10,
      effect:"sepia",
      format: "jpg"
      }
    ));
  });

我可以使用以下代码上传它 unsigned

Ionic 未签名请求

ngOnInit(): void {
  const uploaderOptions: FileUploaderOptions = {
    url: 'https://api.cloudinary.com/v1_1/' + this.cloudinary.config().cloud_name + '/upload', 
    autoUpload: false,
    isHTML5: true,
    removeAfterUpload: true,
    headers: [{        
        name: 'X-Requested-With',
        value: 'XMLHttpRequest'
    }]
  };

  this.uploader = new FileUploader(uploaderOptions);

  // Add custom tag for displaying the uploaded photo in the list
  this.uploader.onBuildItemForm = (fileItem: any, form: FormData): any => {
    form.append('upload_preset', this.cloudinary.config().upload_preset);
    form.append('public_id', 'subfolder/' + this.UUID);
    form.append('file', fileItem);

    fileItem.withCredentials = false;
    return { fileItem, form };
  };

}

Ionic 签名请求

所以为了转换我的图像，我需要使用名为 eager

的参数

form.append('eager', 'c_crop,w_191,h_145,g_face,z_0.7');

但是我得到以下错误

Upload completed with status code 400
 {
  "message": "Eager parameter is not allowed when using unsigned upload.
Only upload_preset,callback,public_id,folder,tags,context,face_coordinates,custom_coordinates,source upload parameters are allowed.
    }

当我删除 "tell" 的预设时，可能这是一个已签名的请求，我收到上述错误 + Upload preset must be specified when using unsigned upload

所以我不确定我应该如何 "tell" 它 - 使用签名请求，并从 .env 或 CloudinaryModule.forRoot({Cloudinary}, cloudinaryConfiguration as CloudinaryConfiguration), 等中获取我的配置 ...

Answer 1

对于签名上传，您需要创建一个签名。在 post 请求期间，您必须将其与表格一起附加。

签名是 SHA1 十六进制字符串，由时间戳（unixtime）、public_id（任何文本）和您的云计算 API_SECRET.

组成

这是我的可行示例

private generateSignature() {
    this.public_id = `image_${Date.now()}`; // I like to make it unique.
    this.unixtime = Date.now() / 1000 | 0;
    return CryptoJS.SHA1(`public_id=${this.public_id}&timestamp=${this.unixtime}${this.API_SECRET}`).toString()
}

这里我用CryptoJS来加密

在发送 API 请求之前，将此签名附加到表单正文中。例如

 initFileUploader(): void {
    const self = this;
    self.uploader = new FileUploader({            
        url: 'https://api.cloudinary.com/v1_1/your_cloud_name/upload',
        allowedMimeType: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'],
        maxFileSize: 524288,//512 KB
        autoUpload: true,
        removeAfterUpload: true,
        isHTML5: true,
        headers: [
            {
                name: 'X-Requested-With',
                value: 'XMLHttpRequest'
            }
        ]
    });
    self.uploader.onAfterAddingFile = (file) => {
        file.withCredentials = false;
    };

    self.uploader.onSuccessItem = (item, response, status) => {
        const resp = <any>JSON.parse(response);
        if (resp) {
            this.onSuccess.emit(resp);
        } else {
            this.onError.emit('An error occured during upload. Please retry');
        }
    };

    self.uploader.setOptions(self._uploaderOptions);

    self.uploader.onBuildItemForm = (fileItem: any, form: FormData): any => {
        let signature = this.generateSignature();

        form.append('timestamp', this.unixtime.toString());
        form.append('public_id', this.public_id);
        form.append('api_key', this.API_KEY); //your cloudinary API_KEY
        form.append('signature', signature);

        return { fileItem, form };
    };                
}

我使用 ng2-file-upload 上传...

如何使用 Cloudinary/Angular(5) 和 Ionic(3) 将图像作为签名请求上传？

how to upload images as a signed request with Cloudinary/Angular(5) and Ionic(3)?

cloudinary

ionic-framework

basic.js

Ionic 未签名请求

Ionic 签名请求