Angular与Java Spring中POST请求能否同时传递JSON对象与图片参数？

当然支持！不过你当前的Angular代码写法有问题——不能直接把FormData和JSON对象打包成一个对象传给http.post，因为HttpClient会默认把普通对象序列化为JSON，而FormData需要用multipart/form-data格式传输。下面是修正后的完整实现方案：

一、Angular 前端修正 #

你需要把JSON对象也塞进FormData里，通常是把它序列化为字符串后添加。修改后的代码如下：

addHero(file: File, category: CategoryModel): Observable<any> {
  const formData: FormData = new FormData();
  // 添加上传的文件
  formData.append('file', file);
  // 将CategoryModel对象序列化为JSON字符串后添加到FormData
  formData.append('category', JSON.stringify(category));
  
  // 注意：这里不需要手动设置Content-Type，HttpClient会自动处理
  return this.http.post<any>(this.categoryUrl, formData)
    .pipe(
      // catchError(this.handleError('addHero', file))
    );
}

关键注意点： #

• 不要手动设置Content-Type: multipart/form-data，HttpClient会自动为FormData生成正确的请求头（包括自动生成的boundary分隔符），手动设置反而会导致后端解析失败。
• 确保CategoryModel的字段能被JSON.stringify正确序列化（比如没有循环引用）。

二、Spring 后端接收 #

后端需要使用@RequestPart注解分别接收文件和JSON参数，Spring会自动完成文件解析和JSON反序列化。示例代码如下：

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
public class HeroController {

    @PostMapping("/your-category-endpoint") // 替换成你的实际接口路径
    public ResponseEntity<?> addHero(
            @RequestPart("file") MultipartFile file,
            @RequestPart("category") CategoryModel category
    ) {
        // 处理文件逻辑：比如保存到服务器或OSS
        // String originalFilename = file.getOriginalFilename();
        // file.transferTo(new File("path/to/save/" + originalFilename));
        
        // 处理CategoryModel逻辑
        // categoryService.save(category);
        
        return ResponseEntity.ok("Hero added successfully");
    }
}

后端配置与注意点： #

• Spring Boot 项目默认已经配置了MultipartResolver，无需额外配置即可处理文件上传。
• CategoryModel类需要满足JSON反序列化要求：有无参构造方法，字段提供getter/setter（或使用Lombok的@Data注解简化）。
• 接口参数名必须和前端FormData.append时的键完全匹配（比如前端是'file'，后端就是@RequestPart("file")）。

可选方案（不推荐） #

如果不想用FormData，也可以把文件转成Base64字符串，和CategoryModel一起作为JSON对象传递，但这种方式会让文件体积增加约30%，大文件场景下性能很差，所以优先推荐multipart/form-data的方案。

内容的提问来源于stack exchange，提问作者SIn san sun