Проблема получения прогресса и файла при загрузке файла в Angular - PullRequest
Новая
       38

Проблема получения прогресса и файла при загрузке файла в Angular

1 голос
/ 04 апреля 2019

У меня есть приложение Angular, где я просто хочу скачать файл.

До сих пор это был мой код: 

this.fileNavigationService.downloadFile(element).subscribe(result => {
    this.generateDownload(result);
});

И мой сервис: 

downloadFile(file: FileElement) {
    return this.http.get(this.apiUrl + '/downloadFile', { params: file.name, responseType: 'blob' });
}

Теперь я хотел показать прогресс при загрузке файла. Посмотрев в Интернете, я наткнулся на что-то весьма полезное. Мой сервис теперь выглядит так: 

downloadFile(file: FileElement) {
    const req = new HttpRequest('GET', '/downloadFile?path=' + file.name, {
      reportProgress: true,
    });

    return this.http.request(req).subscribe(event => {
      if (event.type === HttpEventType.DownloadProgress) {
        const percentDone = Math.round(100 * event.loaded / event.total);
        console.log(`File is ${percentDone}% downloaded.`);
      } else if (event instanceof HttpResponse) {
        console.log('File is completely downloaded!');
      }
    });
}

Я ясно вижу в своей консоли прогресс, однако теперь у меня есть 2 проблемы:

  • Мой код никогда не переходит в последний if, даже если загрузка достигает 100%
  • Код в моем компоненте явно не работает по методу подписки

    Свойство «подписка» не существует для типа «Подписка».

Но я не могу найти способ заставить это работать, чтобы я мог получить прогрессию и мой файл результатов.

У вас есть идеи или примеры, чтобы помочь мне в этом? Спасибо.

1 Ответ

2 голосов
/ 04 апреля 2019

После некоторых исследований мне, наконец, удалось решить мою проблему благодаря этому ответу .

Теперь это мой сервисный код: 

downloadFile(file: FileElement) {
  return this.http.get(
    this.apiUrl + '/downloadFile', 
    { 
        params: file.name, 
        responseType: 'blob',
        reportProgress: true,
        observe: 'events', 
        headers: new HttpHeaders({ 'Content-Type': 'application/json' }) 
    }
  );
}

И в моемкомпонент: 

this.fileNavigationService.downloadFile(element).subscribe(result => {
    if (result.type === HttpEventType.DownloadProgress) {
      const percentDone = Math.round(100 * result.loaded / result.total);
      console.log(percentDone);
    }
    if (result.type === HttpEventType.Response) {
      this.generateDownload(result.body);
    }
});
...