如何将多个文件从 Angular 作为 FormData 发送到 Spring Boot 作为 MultipartFile[]？

Question

我下面的代码用于单个文件上传，但我试图一次将多个文件从 Angular 发送到 Spring Boot。在 Spring Boot 中将多个 formdata 发送到 ArrayList 会导致

null

，并且我无法在 Spring Boot 中

@RequestParam

单个 formdata，因为从 Angular 发送的文件量是动态的（由用户定义）。有人可以帮忙吗？

Spring Boot 控制器：

@PostMapping("/jobAdApplication")
public void jobAdApplication (@RequestParam("files") MultipartFile[] files, 
   @RequestParam("candidateName") String candidateName) {
       (...)
}

角度分量：

selectedFiles!: FileList;
file!: file;

(...)

if (this.selectedFiles) {
   let file: File | null = null;
   const formData: FormData = new FormData();

   for (let i = 0; i < this.selectedFiles.length; i++) {
      file = this.selectedFiles.item(i);
      if (file) {
         formData.append(`file${i}`, file);
      }
   }

   formData.append('candidateName', this.applyFormGroup.get('name')?.value);

   this.fileService.uploadFile(formData).subscribe({
      next: response => {
         alert('Files sent successfully')
         this.applyFormGroup.reset();
      },
      error: err => {
         alert(`Error: ${err.message}`);
      }
   });

   this.selectedFiles = undefined;
}

角度服务：

uploadFile(jobAdApplication: FormData): Observable<any> {
   return this._http.post<any>(`${this.jobCandidateUrl}/jobAdApplication`, jobAdApplication);
}

Answer 1

selectedFiles!: FileList

不是必须是可迭代的吗？就像一个数组？然后 for (of) 循环也应该更改为访问索引

[i]

处的文件。如果它是一个对象，例如地图，您可以使用 for (in) 循环并使用 Object.entries 获取项目。

您可以在发布之前控制台日志

jobAdApplication

吗？我只是好奇数据结构是什么样的。

如果没问题，请检查一下如何附加文件。

控制器期望参数文件上有 MultipartFile 数组。

@RequestParam("files") MultipartFile[] files

但是在这里您将它们附加到具有更改索引的文件中。

 formData.append(`file${i}`, file);

而是将它们保留为命名文件，以便控制器可以访问正确的内容。

 formData.append('files', file);

Answer 2

我面临着同样的问题，您能告诉我您使用什么组件来上传图像吗？或者它是带有类型文件的常规HTML输入，请附上接收事件并将其保存为文件的类型脚本方法？