Windows 上的 Angular 12 上传进度错误（太快）

Question

我们正在使用一个网络前端，我们可以在其中上传大文件（最多 2 GB），并且我们使用以下代码片段：

    const headers = { /* private */ };
    const filestatus$ = this.http.put(url, file, {
        observe: 'events',
        reportProgress: true,
        headers,
    });

    const sub = filestatus$.subscribe((uploadProgress) => {
        switch (uploadProgress.type) {
            case HttpEventType.UploadProgress:
                const progress = 100 * (uploadProgress.loaded / uploadProgress.total!);
                console.log('progress', progress);
                break;
            case HttpEventType.Response:
                console.log('upload finished');
                sub.unsubscribe();
                break;
        }
    });

当我在 Mac 上使用 Chrome 运行此程序时，我会收到包含进度的日志，一旦达到 100，我就会立即得到“上传完成”的信息。 （长话短说：一切都如预期） 当我在 Windows 上使用 Chrome 运行它时，我收到一些进度消息，但只持续几秒钟，然后它显示“进度 100”（在这么短的持续时间后，我的带宽就不可能做到这一点），几分钟后（大约在我的Mac上花费的时间），我得到“上传完成”。如果我打开开发工具，我可以看到上传放置请求处于“待处理”状态，当它完成时，我会立即完成。我想这意味着，Windows 上的 Chrome 中的进度事件为时过早。

我该如何解决这个问题？

（当然这通常显示为进度条，但为了调试我使用了console.log）

Answer 1

我平静地称其为错误并必须解决它。 我将文件“手动”拆分为块，其中块的数量和大小取决于总文件大小。这样我就可以完全上传一个块，然后通过将已上传块的大小总和除以总文件大小来更新总上传的百分比。这样，如果上传中断，我也可以恢复。 （我在简历中使用 Azure Blob 存储特定机制）

Answer 2

我遇到了同样的问题：它在 macOS 上工作正常，但在 Windows 和 iOS 上无法正常工作。

经过研究，我意识到问题的出现是因为我正在使用 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;
            }));
}