reportProgress 在生产中不起作用

Question

当我上传视频文件时，它在本地（开发模式）下正常工作。但是当我将其上传到服务器（产品）时，它不起作用。
这是服务：

uploadVideo(id: String, file, imageId) {
        let formData = new FormData();
        formData.append('video', file);
        formData.append('imageId', imageId);
        return this.http.post<any>(`.../${id}/video`, formData, {reportProgress: true, observe: 'events'})
                .pipe(map(response => {
                        return response;
                }));
    }

这是组件 ->

this.arrivalProductService.uploadVideo(this.data.id, this.selectedFile, imageId)
      .pipe(
        map((event) => {
          console.log('event', event);
          if(event.type === HttpEventType.UploadProgress){
            const percentDone = Math.round(100 * event.loaded / event.total);
            return { status: 'progress', message: percentDone };
          }
          if (event.type === HttpEventType.Response) {
            return event.body;
          }
        }),
        catchError(error => {
          return throwError(error);
        }),
        finalize(() => {
          console.log('completed');
        })
      )
      .subscribe(
        data => {
          ....
       })

如果我在 map() 上记录事件，在本地开发上它会返回所有进度：如 ({status: 'progress', message: 0}, ... 等)，在生产上它不会返回任何内容..
我不能了解代码有什么问题..请帮助我

Answer 1

您可能在生产构建中使用服务工作者。

https://angular.io/guide/service-worker-devops#bypassing-the-service-worker

绕过 Service Worker 在某些情况下，您可能希望完全绕过 Service Worker 并让浏览器处理请求。一个例子是，当您依赖于 Service Worker 当前不支持的功能时（例如，报告上传文件的进度）。

要绕过 Service Worker，您可以将 ngsw-bypass 设置为请求标头或查询参数。（标头或查询参数的值将被忽略，可以为空或省略。）

所以在你的情况下：

uploadVideo(id: String, file, imageId) {
        let formData = new FormData();
        const headers = new HttpHeaders({ 'ngsw-bypass': ''});

        formData.append('video', file);
        formData.append('imageId', imageId);
        return this.http.post<any>(`.../${id}/video`, formData, {reportProgress: true, observe: 'events', headers: headers})
                .pipe(map(response => {
                        return response;
                }));
}