为什么使用帖子上传文件后页面会重新加载？ （角 + Spring 引导）

Question

文件上传正常，但应用程序在收到后端响应后正在重新加载。
Angular代码
HTML

<input hidden="true" accept="text/pdf, .pdf" type="file" #pdfInput id="report"
                       (change)="validateFile($event)">
<mat-card class="reportName">
   <input readonly matInput name="fileHidden" formControlName="pdfFile">
</mat-card>

<button class="mat-raised-button" [disabled]="this.uploadReport.invalid" (click)="saveReport()">Upload Document</button>

TS

saveReport() {
    console.log(this.uploadReport.value.category);
    this.reportService.saveReport(this.uploadReport.value.category, this.uploadFile).subscribe((val) => {
      console.log(val);
    })
  }

saveReport(category :string, dataFile : FormData): Observable<ApiResponse> {
    return this.http.post<ApiResponse>(this.ROOT_URL + '/report/' + category  , dataFile, {reportProgress: true, responseType: 'json'});
  }

Spring开机

@PostMapping("/{category}")
    public ResponseEntity<Response<String>> saveReport(@RequestParam("file") MultipartFile multipartFile,
                                                       @PathVariable String category) throws IOException 
        return ResponseEntity.ok(reportService.saveReport(category, multipartFile));
    }

Answer 1

我认为应用程序不会因为收到来自后端的响应而重新加载。 您的上传按钮是表单中唯一的按钮吗？ 如果然后尝试阻止表单的提交行为：

<button (click)="saveReport(); $event.preventDefault()">

或者

将 type='button' 添加到该按钮。 表单中没有任何定义类型的按钮就像提交按钮