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

Question

我下面的代码用于单个文件上传，但我试图将多个文件从 Angular 发送到 Spring 同时启动。在 Spring Boot 中将多个表单数据发送到 ArrayList 会导致 null，而我无法在 Spring Boot 中 @RequestParam 发送单个表单数据，因为从 Angular 是动态的（由用户定义）。有人可以帮忙吗？

Spring 引导控制器：

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

Angular分量：

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

Angular 服务：

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.

获取项目

你能在 POST 之前控制台登录 jobAdApplication 吗？我只是好奇数据结构是什么样的。

如果没问题，请查看如何追加文件。

控制器需要参数文件中的 MultipartFile 数组。

@RequestParam("files") MultipartFile[] files

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

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

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

 formData.append('files', file);

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

How to send multiple files from Angular as FormData to Spring Boot as MultipartFile[]?

form-data

spring-boot

angular

multipartfile