Angular向SpringBoot同API传输文件及异构数据的解决方案问询

问题背景 #

需要实现Angular前端向SpringBoot后端同时传输CSV文件及异构数据（包含数字、数组、日期等非字符串类型），前端DTO定义如下，后端对应DTO的文件字段为MultipartFile，但使用@RequestBody接收接口时始终抛出异常。

前端DTO定义 #

export class example {
    id: number;
    addresses?: string[];
    status: string;
    createdBy?: string;
    createdDate?: Date;
    collections: number[]; // 注：JavaScript无int类型，需改为number[]
    addressesDocument: File; // 需要传输的CSV文件
}

后端报错接口代码 #

@PostMapping("/examples")
public void createExample(@Valid @RequestBody ExampleDTO example) throws URISyntaxException, FileNotFoundException {
    System.out.println(example.getAddressesDocument());
    exampleService.create(example);
}

最优解决方案：Multipart/form-data + @RequestPart #

这是SpringBoot处理文件与异构混合数据的标准方案，既能保留数据类型校验，又能正确解析文件，兼容性和扩展性最优。

1. 后端接口改造 #

将@RequestBody替换为@RequestPart，明确指定请求媒体类型为multipart/form-data：

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.multipart.MultipartFile;
import javax.validation.Valid;

@PostMapping(value = "/examples", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public void createExample(
    @Valid @RequestPart("exampleData") ExampleDTO exampleDTO,
    @RequestPart("addressesDocument") MultipartFile addressesDocument
) throws URISyntaxException, FileNotFoundException {
    // 将文件绑定到DTO（根据业务需求选择）
    exampleDTO.setAddressesDocument(addressesDocument);
    System.out.println(exampleDTO.getAddressesDocument().getOriginalFilename());
    exampleService.create(exampleDTO);
}

若ExampleDTO已包含MultipartFile类型的addressesDocument字段，也可直接用@RequestPart接收整个DTO，但需确保前端字段命名完全匹配。

2. Angular前端请求改造 #

将异构数据序列化为JSON字符串，与文件一起放入FormData对象中发送：

import { HttpClient } from '@angular/common/http';

// 构造异构数据（排除文件字段）
const examplePayload = {
    id: 1,
    addresses: ["北京市朝阳区", "上海市黄浦区"],
    status: "ENABLED",
    createdBy: "system",
    createdDate: new Date(),
    collections: [1001, 1002, 1003]
};

const formData = new FormData();
// 将JSON数据转为Blob后加入FormData，指定媒体类型为application/json
formData.append(
    'exampleData', 
    new Blob([JSON.stringify(examplePayload)], { type: 'application/json' })
);
// 添加CSV文件
formData.append('addressesDocument', this.example.addressesDocument);

// 发送POST请求
this.http.post('/examples', formData).subscribe({
    next: () => console.log('数据与文件上传成功'),
    error: (err) => console.error('上传失败:', err)
});

注意：Angular会自动根据FormData设置请求头的Content-Type为multipart/form-data; boundary=xxx，无需手动指定。

其他可选方案 #

方案1：Base64编码文件嵌入JSON（仅适合小文件） #

将文件转为Base64字符串，和其他数据一起作为JSON请求体发送：

• 前端：使用FileReader将File转为Base64字符串，替换addressesDocument字段
• 后端：DTO中对应字段改为String，接收后解码为字节流生成文件
  缺点：Base64会使文件体积增加约30%，大文件会导致请求体过大，引发性能或网关限制问题。

方案2：分两次请求（适合非强关联场景） #

1. 先发送异构数据，后端返回临时业务ID
2. 以临时ID为标识，单独上传文件
   缺点：增加请求次数，需额外处理事务一致性（比如数据提交后文件上传失败的回滚逻辑）。

内容的提问来源于stack exchange，提问作者Rafik Boubaker