将图像从 Angular4 上传到 Cloudinary

Question

我是 cloudinary 和 Angular4 的新手。

我一直在寻找一种通过 Angular4 将图像上传到 cloudinary 的方法，但还没有找到任何文档。我发现的文档与图像转换有关，而不是上传。

如何将图像从 Angular4 上传到 cloudinary。

附言。我正在使用 Angular4 AOT

Answer 1

您可以找到一个示例here。它使用ng2-file-upload，它也适用于Angular4。

要考虑的要点是 wiring the uploader 到您的 Cloudinary 帐户 -

// Create the file uploader, wire it to upload to your account
const uploaderOptions: FileUploaderOptions = {
  url: `https://api.cloudinary.com/v1_1/${this.cloudinary.config().cloud_name}/upload`,
  // Upload files automatically upon addition to upload queue
  autoUpload: true,
  // Use xhrTransport in favor of iframeTransport
  isHTML5: true,
  // Calculate progress independently for each uploaded file
  removeAfterUpload: true,
  // XHR request headers
  headers: [
    {
      name: 'X-Requested-With',
      value: 'XMLHttpRequest'
    }
  ]
};
this.uploader = new FileUploader(uploaderOptions);

this.uploader.onBuildItemForm = (fileItem: any, form: FormData): any => {
  // Add Cloudinary's unsigned upload preset to the upload form
  form.append('upload_preset', this.cloudinary.config().upload_preset);
  // Add built-in and custom tags for displaying the uploaded photo in the list
  let tags = 'myphotoalbum';
  if (this.title) {
    form.append('context', `photo=${this.title}`);
    tags = `myphotoalbum,${this.title}`;
  }
  form.append('tags', tags);
  form.append('file', fileItem);

  // Use default "withCredentials" value for CORS requests
  fileItem.withCredentials = false;
  return { fileItem, form };
};