Angular前端如何通过HttpClient.post批量发送多组FormData（多文件）至Java后端？

你遇到的问题我太熟悉了——直接传FormData数组肯定行不通，因为multipart/form-data这种请求格式本身就是单一的键值对集合，浏览器根本没法把多个FormData对象解析成合法的请求体。下面给你一套能正常运行的前后端调整方案，完美适配批量文档上传需求：

一、前端代码修改（核心：用单个FormData承载所有批量数据） #

你之前错误地创建了多个FormData对象并放进数组发送，正确的做法是只创建一个FormData实例，然后遍历每个文档，用带索引的键名把每个文档的属性和文件都append进去。这样Spring后端才能自动把这些键值对组装成对象列表：

public postSaveDocuments(entityType: DocumentEntityType, id: number, body: DocumentInputDto[]): Observable<Upload<UploadWithLockResultsDto>> {
    const url = `${DocumentationService.baseUrl}/${getUrlSegment(entityType)}/${id}/documents`;
    const formData = new FormData();

    // 遍历每个待上传的文档，用索引式键名绑定属性
    body.forEach((doc, index) => {
        // 注意：这里要使用当前循环的doc对象属性，而不是组件的this变量！
        formData.append(`documents[${index}].documentId`, doc.documentId.toString());
        formData.append(`documents[${index}].title`, doc.title);
        formData.append(`documents[${index}].content`, doc.content, doc.content.name);
    });

    return this.httpClient.post(url, formData,
      {...DocumentationService.options, reportProgress: true, observe: 'events', responseType: 'json'})
      .pipe(upload<UploadWithLockResultsDto>());
}

前端关键说明： #

• 必须用单个FormData对象承载所有批量数据，这是multipart/form-data格式的硬性要求。
• 键名格式documents[${index}].xxx是核心：Spring会自动识别这种带索引的命名，把相同前缀的键值对组装成DocumentInputDto对象，最终形成List。
• 一定要用循环里的doc对象属性（比如doc.documentId、doc.title），别再用组件的this.documentId这类全局变量，不然所有文档都会复用同一个属性值！

二、后端代码修改（核心：接收List） #

后端只需要调整参数类型，把单个DocumentInputDto改成List<DocumentInputDto>，同时别忘了补上Authentication参数（你之前的方法体里用到了但参数没声明，会导致报错）：

@PostMapping("/{documentEntityType}/{entityId}/documents")
public ResponseEntity<UploadWithLockResultsDto> saveDocuments(
       @PathVariable("documentEntityType") DocumentEntityType documentEntityType,
       @PathVariable("entityId") Integer entityId,
       @ModelAttribute List<DocumentInputDto> documents, // 改成List类型接收批量数据
       Authentication authentication // 必须添加这个参数，否则方法体里的authentication会报错
) throws AuthException, IOException {
       // 调用批量更新的服务方法（你已经实现了updateDocuments）
       var uploadWithLockResultsDto = documentService.updateDocuments(documents, authentication.getName(), authentication.getPrincipal());
       return handleUploadWithLockResults(uploadWithLockResultsDto);
}

后端关键说明： #

1. 确保DocumentInputDto中的content字段类型是MultipartFile，这样Spring才能把FormData里的文件内容正确绑定到这个字段：

   public class DocumentInputDto {
       private String documentId;
       private String title;
       private MultipartFile content; // 必须是MultipartFile类型
   
       // 省略getter/setter
   }
   

2. @ModelAttribute注解可以省略，Spring默认会对复杂对象参数使用这个注解，但加上更清晰。
3. 如果你之前的documentService.updateDocuments方法还没适配List参数，记得把它改成接收List<DocumentInputDto>，然后循环处理每个文档的保存逻辑。

备注：内容来源于stack exchange，提问作者Tim