angle2のCloudDBへのファイルリクエストの送信方法

Question

画像アップロードAPIを使用して画像ファイルを雲霧にアップロードしています。 私は

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); 
    } 

しかし、それは私がng2-使用しています、次のエラー

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

を与えていますファイルアップロードは、angle2でファイルをアップロードします。次のように

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

を使用しての追加の例を見つけることができます