Angular 10 Observable多次响应

Question

我在Angular 10应用程序中有一个函数，我可以在其中创建一个blob并上传一个文件。当我订阅了这个可观察到的，它会响应五次。我不知道在哪里或为什么？

uploadBacklogUploadFile(data, fileName: string) {
const blob = new Blob([data], { type: 'text/csv' });
this.backlogUploadService
.uploadBacklogFile(blob, fileName, this.selectedJoin.id)
.subscribe(        
() => {  <-----this block of code will run 5 times
this.uploadPercent = 100;
this.dialogRef.close(true);
this.openDialog();
this.backlogUploaded.emit(true);
},
() => {
this.uploadPercent = 0;
this.snackBar.open('The backlog failed to be uploaded', null, {
panelClass: 'snack-bar-error'
});
},
);
}

我的服务

public uploadBacklogFile(file: string | Blob, fileName: string, Id: number): Observable<HttpEvent<any>> {
const requestView = new BacklogUploadRequestView(Id);
const formData: FormData = new FormData();
formData.append('backlogUpload', new Blob([JSON.stringify(requestView)], { type: 'application/json' }), '');
formData.append('file', file, fileName);
const headers = new HttpHeaders({
Accept: 'application/json',
});
const url = this.remoteClientUtils.getThorUrl() + `${this.BACKLOG_UPLOAD_URL}`; 
console.log("checkpoint") <------- this will only log once, so it must be nothing above?
return this.httpClient.request(HttpMethods.POST, url, {
body: formData,
headers: headers,
reportProgress: true,
observe: 'events'
})
.pipe(
catchError(this.remoteClientUtils.handleError<HttpEvent<any>>(null)));
}

Answer 1

当您使用reportProgress和observe时，您试图跟踪上传的进度(https://angular.io/guide/http#requesting-来自服务器的数据(，我认为，你应该删除这些选项

this.httpClient.request(HttpMethods.POST, url, {
body: formData,
headers: headers,
reportProgress: true, //delete this
observe: 'events'    // and delete this
})