是否可以在 httpClient.post 中发送 FormData 对象数组？

您的思路是对的，但直接从前端向后端发送数组中的多个 FormData 对象是行不通的，因为 FormData 对象应该作为单个实体发送。相反，您应该使用多部分表单请求将文档作为单个 FormData 对象中的单独部分发送。

步骤 1：前端 - 修改 FormData 对象以处理多个文件 要发送多个文件，您可以将每个文档的数据附加到同一个 FormData 对象，每个文档都有唯一的键。这样您就可以在一个 HTTP 请求中发送多个文档。

更新的前端代码：

public postSaveDocuments(entityType: DocumentEntityType, id: number, body: DocumentInputDto[]): Observable<Upload<UploadWithLockResultsDto>> {

    const url = `${DocumentationService.baseUrl}/${getUrlSegment(entityType)}/${id}/documents`;

    // Create a single FormData object for all documents
    const formData = new FormData();

    // Loop through the document DTOs and append each one
    body.forEach((documentInputDto, index) => {
      formData.append(`documents[${index}].documentId`, this.documentId.toString());
      formData.append(`documents[${index}].title`, this.title);
      formData.append(`documents[${index}].content`, this.content, this.content.name);
    });

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

第 2 步：后端 - 处理多部分表单数据 在后端，您需要处理多个文件及其相关元数据。您可以通过将数据作为 MultipartFile 数组或自定义 DTO 来执行此操作，具体取决于您喜欢如何构造请求。由于您要发送元数据和文件，因此可以使用 @RequestParam 和 @ModelAttribute 注释的组合来绑定表单数据和文件内容。

更新了后端代码：

@PostMapping("/{documentEntityType}/{entityId}/documents")
public ResponseEntity<UploadWithLockResultsDto> saveDocuments(
    @PathVariable("documentEntityType") DocumentEntityType documentEntityType,
    @PathVariable("entityId") Integer entityId,
    @RequestParam("documents") List<MultipartFile> documents,
    @RequestParam Map<String, String> documentMetadata) throws AuthException, IOException {

    // Parse metadata and files
    List<DocumentInputDto> documentInputDtos = new ArrayList<>();
    for (int i = 0; i < documents.size(); i++) {
        MultipartFile file = documents.get(i);
        String documentId = documentMetadata.get("documents[" + i + "].documentId");
        String title = documentMetadata.get("documents[" + i + "].title");

        DocumentInputDto documentInputDto = new DocumentInputDto();
        documentInputDto.setDocumentId(Long.parseLong(documentId));
        documentInputDto.setTitle(title);
        documentInputDto.setContent(file); // Assuming the DocumentInputDto has a 'content' field for the file

        documentInputDtos.add(documentInputDto);
    }

    // Save the documents to the database
    var uploadWithLockResultsDto = documentService.updateDocuments(documentInputDtos, authentication.getName(), authentication.getPrincipal());
    return handleUploadWithLockResults(uploadWithLockResultsDto);
}

步骤 3：更新 DocumentInputDto

public class DocumentInputDto {
    private Long documentId;
    private String title;
    private MultipartFile content; // The file being uploaded
    
    // Getters and setters...`enter code here`
}

您面临的文档数组返回为 null 的问题可能是由于 Spring 处理表单数据和多部分文件上传的方式所致。问题可能是您在请求中使用相同名称 (documents[]) 发送文件和表单数据（如元数据），但 Spring 可能未正确将 MultipartFile 部分映射到 List 文档。

让我们来看看可以进行的一些调整，以确保 Spring 将文件数据和元数据正确地映射到正确的字段。

步骤 1：更新前端代码 您已经在单个 FormData 对象中发送带有元数据的文件。关键问题是确保请求的结构正确，以便后端可以正确识别文件和元数据。需要为每个文档发送带有单独名称字段的文件，并且元数据应遵循相同的命名约定。

以下是更新后的前端代码，可以正确附加多个文档：

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

    // Create a single FormData object to handle multiple files and their metadata
    const formData = new FormData();

    // Loop through the document DTOs and append each one to the formData object
    body.forEach((documentInputDto, index) => {
        // Append metadata fields
        formData.append(`documents[${index}].documentId`, documentInputDto.documentId.toString());
        formData.append(`documents[${index}].title`, documentInputDto.title);

        // Append the file for this document
        formData.append(`documents[${index}].content`, documentInputDto.content, documentInputDto.content.name);
    });

    // Send the FormData as a POST request
    return this.httpClient.post(url, formData, {
        ...DocumentationService.options,
        reportProgress: true,
        observe: 'events',
        responseType: 'json'
    }).pipe(upload<UploadWithLockResultsDto>());
}

步骤 2：更新后端代码 Spring 使用 @RequestParam 绑定表单数据和文件上传。解决此问题的关键是确保元数据和文件正确绑定到后端参数。以下是如何调整后端以正确处理文件上传和元数据的方法：

MultipartFile Array：Spring 的 @RequestParam 会将发送的多个同名文件映射到 List。元数据映射：要映射文档元数据（例如 documentId 和 title），您可以使用映射或自定义 DTO。以下是更新后的后端方法：

 @PostMapping("/{documentEntityType}/{entityId}/documents")
    public ResponseEntity<UploadWithLockResultsDto> saveDocuments(
        @PathVariable("documentEntityType") DocumentEntityType documentEntityType,
        @PathVariable("entityId") Integer entityId,
        @RequestParam("documents") List<MultipartFile> documents,  // Receive the files
        @RequestParam Map<String, String> documentMetadata) throws AuthException, IOException {
    
        // Ensure the documents and metadata are mapped correctly
        List<DocumentInputDto> documentInputDtos = new ArrayList<>();
        
        for (int i = 0; i < documents.size(); i++) {
            MultipartFile file = documents.get(i);
    
            // Retrieve metadata for each document
            String documentId = documentMetadata.get("documents[" + i + "].documentId");
            String title = documentMetadata.get("documents[" + i + "].title");
    
            // Create DocumentInputDto from metadata and file
            DocumentInputDto documentInputDto = new DocumentInputDto();
            documentInputDto.setDocumentId(Long.parseLong(documentId));
            documentInputDto.setTitle(title);
            documentInputDto.setContent(file); // Assuming 'content' is a MultipartFile field in your DTO
    
            documentInputDtos.add(documentInputDto);
        }
    
        // Save the documents to the database (service call)
        var uploadWithLockResultsDto = documentService.updateDocuments(documentInputDtos, authentication.getName(), authentication.getPrincipal());
        return handleUploadWithLockResults(uploadWithLockResultsDto);
    }

步骤 3：确保 DocumentInputDto 正确 确保您的 DocumentInputDto 类具有 MultipartFile 字段，并且您正确使用了 getter 和 setter。以下是 DocumentInputDto 类的一个简单版本：

public class DocumentInputDto {
    private Long documentId;
    private String title;
    private MultipartFile content; // The file being uploaded

    // Getters and setters
    public Long getDocumentId() {
        return documentId;
    }

    public void setDocumentId(Long documentId) {
        this.documentId = documentId;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public MultipartFile getContent() {
        return content;
    }

    public void setContent(MultipartFile content) {
        this.content = content;
    }
}

步骤 4：处理多部分配置（如果需要）确保您的 Spring Boot 应用程序已配置为处理多部分文件上传。这通常在 application.properties 或 application.yml 文件中完成。您可以按照以下方式进行配置：

# application.properties
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB