如何在angular2中将文件参数发送到Cloudinary post请求答案

【问题标题】：How to send file parameter to Cloudinary post request in angular2如何在angular2中将文件参数发送到Cloudinary post请求
【发布时间】：2017-05-12 18:10:17
【问题描述】：

我正在使用他们的图像上传 API 将图像文件上传到 cloudinary。我是这样实现的，

HTML代码

<input type="file" ng2FileSelect [uploader]="uploader"/>
<button class="btn btn-primary" (click)="uploadImages()">Upload</button>

打字稿代码

  public uploader: FileUploader = new FileUploader({});

  uploadImages() {
    const params = this.createUploadParams();
    this.upload(params)
      .subscribe(data => {
        console.log("response", data);
      })
  }

  private createUploadParams() {
    return {
      file: this.uploader.queue[0].file,
      upload_preset: env.CLOUDINARY_UPLOAD_PRESET,
      pulic_id: 'PUBLIC_ID'
    }
  }

  upload(params) {
    return this.http.post(`${this.apiLink}/image/upload`, JSON.stringify(params))
      .map(data => data);
  }

但它给了我以下错误

"{"error":{"message":"Missing required parameter - file"}}

我正在使用 ng2-file-upload 来上传 angular2 中的文件。

【问题讨论】：

标签： angular cloudinary

【解决方案1】：

您需要通过 FormData 对象添加文件和上传预设，并在请求中添加标头，如下所示：

从 @angular/http 导入 Http 和标头：

import { Http, Headers } from '@angular/http';

更新上传文件的代码：

uploadImages() {
  const params = this.createUploadParams();
  this.upload(params)
    .subscribe(data => {
      console.log('response', data);
    });
}

private createUploadParams() {
  let formData: FormData = new FormData();
  formData.append('upload_preset', env.CLOUDINARY_UPLOAD_PRESET);
  formData.append('file', this.uploader.queue[0]._file);
  return formData;
}

upload(params) {
  let headers = new Headers();
  headers.append('X-Requested-With', 'XMLHttpRequest');
  return this.http.post(`${this.apiLink}/upload`, params, {headers})
  .map(data => data);
}

您可以找到使用 ng2-file-upload here 的其他示例

【讨论】：