Angular5如何同时发送字符串参数与FormData文件至SpringBoot控制器

当然可以做到！你之前的问题在于用JSON格式传递请求体，而文件属于二进制数据，必须通过FormData来封装所有参数（包括字符串和文件）才能在同一请求中发送。下面是具体的实现方案：

Angular 服务端修改 #

你需要把所有参数（字符串+文件）都封装到FormData对象中，而不是直接传JSON。FormData是专门用于处理包含文件的表单数据的对象：

public createEvent(
  name: string, 
  description: string, 
  fromDate: any, 
  toDate: any, 
  userId: string | number, 
  picture: File
) {
  const formData = new FormData();
  
  // 追加所有字符串参数
  formData.append('name', name);
  formData.append('description', description);
  formData.append('fromYear', fromDate['year'].toString());
  formData.append('fromMonth', fromDate['month'].toString());
  formData.append('fromDay', fromDate['day'].toString());
  formData.append('toYear', toDate['year'].toString());
  formData.append('toMonth', toDate['month'].toString());
  formData.append('toDay', toDate['day'].toString());
  formData.append('userId', userId.toString());
  
  // 追加文件参数，第三个参数可选，用于指定文件名
  formData.append('picture', picture, picture.name);

  // 发送请求：无需手动设置Content-Type，Angular会自动处理为multipart/form-data
  this.http.post(`${this.baseUrl}create`, formData).subscribe({
    next: () => console.log('事件创建成功'),
    error: (err) => console.error('创建失败:', err)
  });
}

Spring Boot 控制器修改 #

现在请求是multipart/form-data类型，不能再用@RequestBody Map来接收了，需要用@RequestParam接收字符串参数，@RequestPart或@RequestParam接收文件：

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
public class EventController {

    @PostMapping(
        value = "/create",
        consumes = MediaType.MULTIPART_FORM_DATA_VALUE // 明确指定接收多部分表单数据
    )
    public void createEvent(
            @RequestParam String name,
            @RequestParam String description,
            @RequestParam Integer fromYear,
            @RequestParam Integer fromMonth,
            @RequestParam Integer fromDay,
            @RequestParam Integer toYear,
            @RequestParam Integer toMonth,
            @RequestParam Integer toDay,
            @RequestParam Long userId,
            @RequestParam("picture") MultipartFile picture // 接收文件参数
    ) {
        // 处理字符串参数
        System.out.println("事件名称：" + name);
        System.out.println("用户ID：" + userId);
        
        // 处理文件
        if (!picture.isEmpty()) {
            System.out.println("上传文件名：" + picture.getOriginalFilename());
            System.out.println("文件大小：" + picture.getSize() + "字节");
            // 这里可以添加文件存储、业务处理逻辑
        }
    }
}

进阶优化：用DTO封装字符串参数 #

如果参数太多，直接用@RequestParam会让方法签名很冗长，你可以把字符串参数封装成一个DTO类，用@RequestPart接收：

1. 创建EventDTO类 #

public class EventDTO {
    private String name;
    private String description;
    private Integer fromYear;
    private Integer fromMonth;
    private Integer fromDay;
    private Integer toYear;
    private Integer toMonth;
    private Integer toDay;
    private Long userId;

    // 生成getter、setter，或者用Lombok的@Data注解简化
}

2. 修改控制器方法 #

@PostMapping(
    value = "/create",
    consumes = MediaType.MULTIPART_FORM_DATA_VALUE
)
public void createEvent(
        @RequestPart EventDTO eventDTO, // 接收DTO参数
        @RequestPart MultipartFile picture
) {
    // 直接使用DTO的属性
    System.out.println("事件描述：" + eventDTO.getDescription());
    // 处理文件...
}

3. 修改Angular端代码 #

需要把DTO对象转成JSON字符串，以Blob形式追加到FormData中：

public createEvent(
  name: string, 
  description: string, 
  fromDate: any, 
  toDate: any, 
  userId: string | number, 
  picture: File
) {
  const formData = new FormData();
  
  // 构建DTO对象
  const eventDTO = {
    name,
    description,
    fromYear: fromDate['year'],
    fromMonth: fromDate['month'],
    fromDay: fromDate['day'],
    toYear: toDate['year'],
    toMonth: toDate['month'],
    toDay: toDate['day'],
    userId
  };
  
  // 将DTO转为JSON Blob并追加
  formData.append(
    'eventDTO', 
    new Blob([JSON.stringify(eventDTO)], { type: 'application/json' })
  );
  
  // 追加文件
  formData.append('picture', picture, picture.name);

  this.http.post(`${this.baseUrl}create`, formData).subscribe(...);
}

关键注意事项 #

• 不要手动设置Content-Type：当你传递FormData对象时，Angular会自动设置Content-Type为multipart/form-data，并自动添加正确的boundary分隔符，手动设置反而会导致请求失败。
• 参数名要对应：Angular中formData.append的第一个参数名，必须和Spring Boot中@RequestParam/@RequestPart的参数名完全一致。
• 空参数处理：如果某些字符串参数可能为空，可以给@RequestParam添加required = false属性，比如@RequestParam(required = false) String description。

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