Angular HTTP ReportProgress卡在某个地方，订阅没有进度

Question

请求服务：

import {Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs/Rx";

@Injectable({
    providedIn: 'root'
})
export class HttpService {
    constructor(public http: HttpClient) {
    }

    uploadFile(formData: FormData): Observable<any> {
        return this.http.post('/upload', formData, {
            reportProgress: true
        });
    }
}

HTTP拦截器：

import {Injectable} from "@angular/core";
import {HttpEvent, HttpHandler, HttpInterceptor, HttpParams, HttpRequest, HttpResponse} from "@angular/common/http";
import {Observable} from "rxjs";
import {tap} from "rxjs/operators";

@Injectable()
export class ConverterInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if(req.body !== null && !(req.body instanceof HttpParams) && !(req.body instanceof FormData)) {
            req = req.clone({
                body: decodeURI(req.body)
            });
        }

        return next.handle(req).pipe(tap((event: HttpEvent<any>) => {
            console.log('Test', event);
            if (event instanceof HttpResponse) {
                event = event.clone({body: encodeURI(event.body)});
            }
            return event;
        }));
    }
}

我如何使用它：

async uploadFile(files: FileList) {
    const formData: FormData = new FormData();
    for (let x = 0; x < files.length; x++) {
        const file = files.item(x);
        formData.append(x.toString(), file, file.name);
    }

    this.httpService.uploadFile(formData).subscribe(a => {
        console.log('A', a);
    }, b => {
        console.log('B', b);
    }, () => {
        console.log('C');
    });
}

问题：当我使用函数上传文件时，收到的消息只有一个A响应。但是没有包含上载进度的事件。

但是在拦截器中，我看到有上载事件。因为我可以多次看到带有事件的Test消息。 （直到上传完成）

我在做什么错了？

预先感谢您的一些想法。 ：-）

StackBlitz： https://stackblitz.com/edit/angular-ultbzm

选择文件后控制台中的问题。

您可以看到我有很多Test事件，但只有一个B事件，即HttpErrorResponse。