reportProgress在生产中不起作用

Question

锁定21小时。此问题的评论已被禁用，但它仍在接受新的答案和其他交互方式。 Learn more。

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

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（）上记录事件，则在本地dev上它返回所有进度：像（{状态：'progress'，消息：0}，...等等），在生产时它什么也不返回。我无法理解代码有什么问题。.请帮助我

Answer 1

您可能在生产版本中使用了服务工作者。

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

绕过服务人员 在某些情况下，您可能希望完全绕过Service Worker，而让浏览器来处理请求。例如，当您依赖服务工作者（例如reporting progress on uploaded files）当前不支持的功能时。

要绕过服务人员，您可以将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;
                }));
}