reportProgress 在生产中不起作用

Question

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

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() 上记录事件，在本地开发它 return 所有进度：喜欢（{状态：'progress'，消息：0}，...等），在生产中它 return 什么都没有..
我不明白代码有什么问题..请帮助我

Answer 1

您可能在生产构建中使用了 Service Worker。

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

Bypassing the service worker In some cases, you may want to bypass the service worker entirely and let the browser handle the request instead. An example is when you rely on a feature that is currently not supported in service workers (e.g. reporting progress on uploaded files).

To bypass the service worker you can set ngsw-bypass as a request header, or as a query parameter. (The value of the header or query parameter is ignored and can be empty or omitted.)

所以在你的情况下：

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

reportProgress 在生产中不起作用

reportProgress is not working in production

production

file-upload

progress-bar

typescript

angular