如何在angular2中創建XHR請求？

Question

我使用angular2 http post請求創建了圖片上傳器。現在我想跟蹤正在上傳的圖像的進度，這可能使用xmlHTTP請求，但我找不到適當的格式。

這裏是我的代碼爲http圖像上傳。

uploadImage(eventId:number,formData:any): Observable<any[]> { 
    // update location info of an event 
    let headers = new Headers({ **Some necessary headers** }); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.post(AppSettings.API_ENDPOINT+'/events/uploads',formData, options) 
     .map((response: Response) => response.json()); 
} 

預期其中一期工程。現在我該如何跟蹤正在上傳的圖片的進度？

Answer 1

我想你可以做這樣的事情在你的腳本：

public uploaded : string; 
uploadImage(eventId: number, formData: any): Observable <any[]> { 
    // update location info of an event 
    let headers = new Headers({ ** Some necessary headers ** }); 
    let options = new RequestOptions({ headers: headers }); 
    let xhr = this.http.post(AppSettings.API_ENDPOINT + '/events/uploads', formData, options); 

    xhr.onprogress = (event) => { 
    let progress = (event.loaded/event.total)*100; 
    this.uploaded = progress; // update the uploaded property to show in the view 
    }; 
    xhr = xhr.map((response: Response) => response.json()); 

    return xhr; 
}