angular `reportProgress` 不起作用

kpbpu008  于 6个月前  发布在  Angular
关注(0)|答案(7)|浏览(61)

哪个@angular/*包是bug的来源?

common

这是一次回归吗?

是的

描述

在将项目升级到Angular 17后,我开始无法监听reportProgress。我认为这与后端配置有关。当我在本地尝试使用jquery ajax时,我可以使用xhr.upload监听事件。以下是代码;

const headers = new HttpHeaders({ 'ngsw-bypass': '' });

return this.apiService
	.put(
		new ApiCall({
			apiUrl: payload.files.data.upload_to,
			path: '',
			body: payload.files.data.file,
			options: {
				reportProgress: true,
				observe: 'events',
				headers: headers,
			},
		})
	)
	.pipe(
		takeUntil(this.fileFacade.destroy$),
		// map(() => fileAction.uploadFilesSuccess()),
		map((event: HttpEvent<any>) => {
			console.log(event);

			switch (event.type) {
				case HttpEventType.UploadProgress:
					let progress = Math.round((event.loaded / event.total) * 100);
					return fileAction.setUploadProgress({ percent: progress });
				case HttpEventType.Response:
					return fileAction.uploadFilesSuccess();
				default:
					return fileAction.uploadFilesFail(null);
			}
		}),
		catchError((err) => of(fileAction.uploadFilesFail(err)))
	);

这是我的api服务函数;

put(apiCall: IApiCall) {
	apiCall = this.setApiCall(apiCall);

	const url = apiCall.getFullPath();

	return this.http.put(url, apiCall.body, apiCall.options).pipe(
		tap((res: any) => res),
		catchError(this.handleError)
	);
}

当它以这种方式工作时,无论文件大小如何,都只返回事件类型0(HttpEventType.Sent)。

请提供一个最小复现bug的链接

  • 无响应*

请提供您看到的异常或错误

  • 无响应*

请提供您发现此bug的环境(运行ng version)

Angular CLI: 17.0.7
Node: 20.9.0
Package Manager: npm 10.1.0
OS: darwin arm64

Angular: 17.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.7
@angular-devkit/build-angular   17.0.7
@angular-devkit/core            17.0.0
@angular-devkit/schematics      17.0.0
@angular/cdk                    17.0.1
@schematics/angular             17.0.7
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

还有其他信息吗?

  • 无响应*
rggaifut

rggaifut1#

你正在使用新的withFetch()提供商吗?
Fetch不支持在上传过程中报告进度。

zfciruhq

zfciruhq2#

是的,我正在使用withFetch()提供商。当我移除provideHttpClient(withFetch())时,它可以正常工作,非常感谢@JeanMeche。我能否让它仅在单个请求中使用XMLHttpRequest?

rslzwgfq

rslzwgfq3#

我们如何将HttpClient与Xhr和fetchApi作为不同的注入?

qyuhtwio

qyuhtwio4#

您可以在模块或特定组件中不使用withFetch(),但这绝对不被推荐。

uhry853o

uhry853o5#

我想在服务中使用它们(当我需要文件上传并带有进度报告时,将使用withoutFetch,否则使用withFetch)。

92dk7w1h

92dk7w1h6#

你好,有关于使用fetch实现进度支持的计划吗?现在在使用SSR时,Angular会显示这样的警告,如果不使用fetch API:
NG02801: Angular检测到 HttpClient 没有配置为使用 fetch API。强烈建议为使用服务器端渲染的应用程序启用 fetch 以获得更好的性能和兼容性。要启用 fetch ,请在应用程序根目录处将 withFetch() 添加到 provideHttpClient() 调用中。
[server]: init
& 如果我们使用fetch,上传进度无法工作。
这个关于fetch标准的工作草案是否有帮助?
whatwg/fetch#425

zhte4eai

zhte4eai7#

目前,Firefox和Safari不支持将ReadableStream作为请求体。在这项功能实现之前,无法使用fetch提供进度报告。
https://developer.mozilla.org/en-US/docs/Web/API/Request#browser_compatibility

相关问题