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 并让浏览器来处理请求。例如，当您依赖服务工作者当前不支持的功能时（例如reporting progress on uploaded files）。

要绕过服务工作者，您可以将 ngsw-bypass 设置为请求标头或查询参数。 （header或query参数的值被忽略，可以为空也可以省略。）

所以在你的情况下：

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;
                }));
}