Как использовать reportProgress в HttpClient в Angular?

Question

Я загружаю файл, используя метод HTTP POST.Я хочу вызвать другой метод, чтобы показать прогресс загрузки конечному пользователю до завершения загрузки файла.Как использовать reportProgress в HttpClient для этого.

  downfile(file: any): Observable<any> {

    return this.http.post(this.url , app, {
      responseType: "blob", reportProgress: true, headers: new HttpHeaders(
        { 'Content-Type': 'application/json' },
      )
    });
  }

Answer 1

Вам необходимо использовать reportProgress: true, чтобы показать какой-либо прогресс по любому запросу HTTP.Если вы хотите увидеть all events, including the progress of transfers, вам нужно также использовать опцию observe: 'events' и вернуть Observable типа HttpEvent.Тогда вы можете поймать все events(DownloadProgress, Response..etc) в методе компонента. Более подробную информацию можно найти в Официальная документация на английском языке .

  downfile(file: any): Observable<HttpEvent<any>>{

    return this.http.post(this.url , app, {
      responseType: "blob", reportProgress: true, observe: "events", headers: new HttpHeaders(
        { 'Content-Type': 'application/json' },
      )
    });
  }

Затем в компоненте вы можете поймать все events, как показано ниже.

this.myService.downfile(file)
    .subscribe(event => {

        if (event.type === HttpEventType.DownloadProgress) {
            console.log("download progress");
        }
        if (event.type === HttpEventType.Response) {
            console.log("donwload completed");
        }
});

Найти HttpEventTypes Here.

Answer 2

вам нужно будет добавить HttpClientModule в ваш AppModule.

. Сначала вам нужно создать объект запроса, создав экземпляр класса HttpRequest и используя опцию reportProgress.

Для получения дополнительной информации, пожалуйста, обратитесь к: https://alligator.io/angular/httpclient-intro/