Не удается показать прогресс при загрузке изображений в angular - PullRequest
Новая
       5

Не удается показать прогресс при загрузке изображений в angular

0 голосов
/ 12 июля 2020

У меня есть метод HTTP-запроса для загрузки изображений в мой uploadServices.ts файл: 

uploadPageImages(newPage: any, images: any[]) {       
        if (images && images.length) {
            var url = `${this.UploadUrl}/${newPage.id}`;           
            const formData = new FormData();
            images.forEach((i, index) => {
                formData.append('file' + index, i.img, i.img.name);
            });

            return this.http.post<any>(url, formData, {
                reportProgress: true,
                observe: 'events'
            }).pipe(map((event) => {
                return event;
            })
            );
        }
    }

в моем компоненте, я использую его так: 

this.pageService.createPage(c)
        .subscribe(newPage => {
            if (newImages && newImages.length) {                   
                this.uploadService.uploadPageImages(newPage, newImages).subscribe(
                    (event) => {
                        if (event.type === HttpEventType.UploadProgress)
                             this.progress = Math.round(100 * event.loaded / event.total);                               
                         else if (event.type === HttpEventType.Response) {
                             this.onSaveComplete();
                         }
                     },
                     (err) => this.errorMessage = err
                 );
             } else {
                 this.onSaveComplete();
             }
             (error: any) => this.errorMessage = <any>error
         });

Изображения загружаются успешно, но моя проблема связана с этой строкой: 

this.progress = Math.round(100 * event.loaded / event.total);

progress не обновляется, и во время отладки я понял, что if (event.type === HttpEventType.UploadProgress) достигается только после завершения загрузки файла и 200 получен код ответа.

это потому, что я использую вложенные подписки? это плохая практика?

приветствуются любые критики, заранее спасибо.

...