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

Posted 2023-02-27

【中文标题】Spring + Angular无法两次上传相同的文件

【英文标题】：Spring + Angular Unable to upload same file twice

【发布时间】：2019-06-28 03:44:18

【问题描述】：

无法两次上传同一个文件。如果上传不同的文件，它的工作原理

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);
  )

我在哪里做错了？

【问题讨论】：

第二次将请求复制为 curl 并粘贴，Devtools -> Networks -> 右键单击​​请求 -> 复制为 curl

@TimBiegeleisen - 我也知道问题所在，但不知道解决办法。问题：Angular 只关注更改，因此当上传的文件没有更改时，它将不起作用

@TimBiegeleisen 它的 Angular 5

@PierreDuc - 是的，很抱歉，我做了这些更改，例如用 File & onSubmit 替换 selectFile。我能够向服务器发送不同的文件，但是当我尝试多次上传相同的文件时，我收到错误 HTTP 400

@Olivia 我只能想象在您的代码中某处您将this.data 再次设置为未定义。您可以做的最好的事情是检查网络请求选项卡并查看发送到服务器的内容。比较第一个请求和第二个请求，看看有什么不同

【参考方案1】：

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

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

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

【讨论】：

您当然可以在 UI 端将 URL 更改为您希望的任何内容。这包括添加一个可能会被服务器忽略的查询参数。我会留下这个答案，以防它对您的问题的其他读者有所帮助。

好的 NP，但在我的情况下，服务器收到 404 错误，这意味着 URL 无法识别 :(

那么也许 Spring Boot 正在考虑将额外的查询参数视为不同的 URL 资源。真可惜。没有适合您的解决方法:-(

添加问号可能会起作用，使其成为url += '?' + Date.now();

【参考方案2】：

我很确定问题是由输入字段上的更改侦听器引起的，它不会为同一个文件再次触发，并且您在第一次提交后将 this.data 设置为 null。

您需要通过 ex. 重置该字段：“手动”进行：

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

这可能不是 Angular 的最佳选择。 或者通过重置表单：

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

Same answer in German