Question

我使用图片上传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中的文件。

Answer 1

您需要添加文件并通过FormData对象上传预设，并按如下方式向请求添加标题：

从@ angular / http：

导入Http和Headers

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

的其他示例

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

1 个答案: