时间戳

首页 > 解决方案 > 为什么使用帖子上传文件后页面会重新加载？（角+弹簧启动）

java - 为什么使用帖子上传文件后页面会重新加载？（角+弹簧启动）

问题描述

文件上传正常，但应用程序在收到后端响应后正在重新加载。
角度代码
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'});
  }

弹簧靴

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

标签： javaangulartypescriptspring-bootapi

解决方案

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

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

或者

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

推荐阅读