Spring + Angular无法两次上传相同文件

时间:2019-02-04 11:51:22

标签: java angular spring typescript spring-boot

无法上传同一文件两次。如果上传其他文件,则可以正常工作

Chrome中的网络下的错误

{ timeStamp: ......, status: 417
  error: 'Bad Request',
  message: 'Required request part 'file' is not present'
  path: 'url as hosted on Tomcat'
}

Spring Boot Controller.java文件

@PostMapping("/Post")
public ResponseEntity<String> handleFileUpload(@RequestParam("file") 
MultipartFile file){ String Message=""; try .......(and so on)}

我的Angular组件

<form [formGroup]="uploadForm" (ngSubmit) = "onSubmit()">
<input type="file" id="selectFile" formControlName="file1" name="selectFile"
(change)="fileEvent($event)"/>

<input type="submit" name="Submit"/>
</form>

Component.ts文件

fileEvent(e) {
 this.data = e.target.files[0];
}
onSubmit() {
  let headers: any = new Headers();
  headers.append('Content-type', 'undefined');
  let formData = new FormData();
  formData.append("file", this.data);
  const req5 = new HttpRequest('POST', 'url as hosted on TOMCAT', formData,
  reportProgress: true,
  responseType: 'text'
  });
  return this.httpClient.request(req5).subscribe(e => {(
  console.log(e);
  )}
}

我在哪里弄错了?

3 个答案:

答案 0 :(得分:1)

您的问题听起来像是浏览器缓存,从而第一次处理请求,第二次发生不同的事情。如果这是问题的根源,那么您可以尝试在POST URL的末尾附加一个随机查询参数,例如

var url = 'url as hosted on TOMCAT';
url = url + (new Date()).getTime();

是的,将查询参数绑定到POST请求似乎很奇怪,但是应该没有什么阻止您这样做。理想情况下,这足以禁用浏览器缓存。

答案 1 :(得分:0)

上传成功后,您是否尝试过清除上传输入字段?

在您的component.html上,您可以保留

<input type="file" id="selectFile" formControlName="file1" name="selectFile"
    (change)="fileEvent($event)"/>

在您的component.ts上,

onSubmit() {
  .
  .
  .
  return this.httpClient.request(req5).subscribe(e => {(
    // try either one of the lines
    document.getElementById('selectFile').value = '';
    this.myFormGroup.patchValue({
       file1: undefined
    });
  )}
}

答案 2 :(得分:0)

我非常确定问题是由输入字段上的更改侦听器引起的,该更改侦听器不会针对同一文件再次触发,并且您将this.data设置为首次提交后为null。 / p>

您需要通过以下方式重置该字段:“手动”进行操作:

onSubmit() {
    // upload the file ...
    document.getElementById("selectFile").value = "";
}

这可能不是Angular的最佳选择。 或通过重置表格:

onSubmit() {
    // upload the file ...
    this.uploadForm.reset();
}

Same answer in German