如何将文件参数发送到角度2中的Cloudinary发布请求

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-文件上传以angular2上传文件。

Answer 1

您需要将头添加文件并上传预设直通一个FORMDATA对象，并添加到请求如下：

导入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文件上传here