Как получить доступ к прогрессу HttpEvent для загрузки файлов в Angular 5?

Question

Я ознакомился с документами angular.io и другими ответами SO на этот вопрос, однако я все еще не могу понять, как получить доступ к процессу загрузки файла для моего вызова POST из Angular 5 в NodeJS и отобразить его пользователю.

Вот что я делаю.

// Код компонента: тело - это данные формы, в которой есть файл и несколько других полей.

  this.fileService.uploadtool5(body, this.token).subscribe(res =>{

        if(res.success){
          //do something server has received post data
        }
      },(err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
              // A client-side or network error occurred. Handle it accordingly.
              //console.log('An error occurred:', err.error.message);
              //console.log('Status', err.status);
             // this.signupfailreasonstatus = err.status;
            } else {
              // The backend returned an unsuccessful response code.
              // The response body may contain clues as to what went wrong,
              //console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
              //console.log('Status', err.status);
            }
      });

// У меня есть перехватчик для объекта ответа, который выглядит следующим образом.

export interface Tool9Response {
  success: boolean;
  message: string;
} 

// fileService code

uploadtool5( payload, token ) : Observable<Tool9Response>{
       const httpOptions = {
         headers: new HttpHeaders({
           'Authorization': token
         })
       };
       return this.http.post<Tool9Response>(this._baseURL + 'appsecuritydesign', payload, httpOptions);

   }

Большинство файлов, которые я загружаю, занимают более 100 МБ для обработки, поэтому загрузка занимает время, и я хочу показать процесс загрузки. Как получить доступ к прогрессу HttpEvent для загрузки файла без изменения способа отправки данных на сервер в настоящий момент?

Answer 1

В вашем файле сервисный код:

uploadtool5( payload, token ) : Observable<any> { // Assuming `payload` is FormData 

    const headers = new HttpHeaders({
       'Authorization': token
     })


   const req = new HttpRequest(
        'POST',      
         this._baseURL + 'appsecuritydesign', 
         payload, 
         { 
            headers:headers,
            reportProgress: true //This is required for track upload process
         }
   );

   return this.http.request(req);
 }

// компонент

this.fileService.uploadtool5(body, this.token).subscribe((event: HttpEvent<any>) => {

   if (event.type == HttpEventType.UploadProgress)
   {
     console.log("Loading: "+ event.loaded / (event.total || event.loaded) * 100 + '%');
   }
   if (event.type == HttpEventType.Response) {
     console.log("response:", event);
    /*success and message fields from the response can be accessed 
      here like this*/
     console.log("response:", event);
     console.log("body:", event.body);
     console.log("success:", event.body.success);
     console.log("message:", event.body.message);
   }


  });