无法上传同一文件两次。如果上传其他文件,则可以正常工作
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);
)}
}
我在哪里弄错了?
答案 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();
}