如何将多个文件从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]处的文件。如果它是一个对象，如map，则可以使用for (in)循环并使用object .entries获取项。

你能在发布jobAdApplication之前控制它吗?我只是好奇它的数据结构是什么样的。

如果这些都可以，然后再检查一下如何追加文件。

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

@RequestParam("files") MultipartFile[] files

但是这里你把它们附加到文件中，改变索引。

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

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

formData.append('files', file);