Angular-监听文件上传进度

<input type="file" (input)="inputFile(file.files[0])" #file>

uploadFile(file): Observable<any> {
    const req = new HttpRequest('POST', '/upload/file', file, {
      reportProgress: true
    });

    return this.http.request(req).pipe(
      map(event => this.getEventMessage(event as HttpEvent<any>, file)), //这里ts编译时出了点类型错误，使用强制声明
      tap(message => console.log(message)),
      last(), // return last (completed) message to caller
      catchError(this.handleError(file))
    );

    //也可以不用HttpRequest, 需要额外的ovserve: 'events'
    return this.http.request('POST', 'URL', { reprtProgress: true, ovserve: 'events' , body: file}).pipe(同上)
}


private getEventMessage(event: HttpEvent<any>, file: File) {
  switch (event.type) {
    case HttpEventType.Sent:
      return `Uploading file "${file.name}" of size ${file.size}.`;

    case HttpEventType.UploadProgress:
      // Compute and show the % done:
      const percentDone = Math.round(100 * event.loaded / event.total);
      return `File "${file.name}" is ${percentDone}% uploaded.`;

    case HttpEventType.Response:
      return `File "${file.name}" was completely uploaded!`;

    default:
      return `File "${file.name}" surprising upload event: ${event.type}.`;
  }
}

this.uploadFile(file).subscribe( res => {}, error? => {}, compplete? => {})