如何在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; 
}