Angular对接Spring Boot文件上传：如何在POST请求中发送FormData作为RequestParam

代码存在的问题 #

Angular端问题 #

• 手动设置Content-Type错误：首先值语法错误（多了无用引号），其次使用Angular HttpClient发送FormData时不需要手动指定multipart/form-data请求头，浏览器会自动生成带边界标识（boundary）的正确请求头，手动设置会丢失边界信息导致后端无法解析文件。
• 多处拼写错误：formdata应为formData、apend应为append、uploaadfile拼写多了一个字母a。
• 请求参数传位错误：FormData是请求体内容，不能放在params参数中（params对应URL查询参数），且contracttemplateid参数也需要追加到FormData中统一传递。
• 配置项options未正确传入定义的请求头（该请求头本身也不需要设置）。

Spring Boot端问题 #

• 注解大小写错误：Java注解大小写敏感，@postmapping需改为@PostMapping、@requestparam需改为@RequestParam。
• 接口未指定访问路径，且未明确接口接收的媒体类型，若Controller类未加@RestController注解，方法还需要补充@ResponseBody注解才能正确返回响应。
• 参数类型定义最好补充校验，避免空指针异常。

修正后的代码 #

Angular Service代码 #

const formData: FormData = new FormData();
// 追加文件参数
formData.append('file', file);
// 非文件参数也追加到FormData中
formData.append('contracttemplateid', '28');
// 第二个参数直接传formData作为请求体，无需手动设置请求头
return this.http.post(uploadfile, formData);

Spring Boot Controller代码 #

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;
import org.springframework.http.MediaType;

// 类上必须加@RestController，若用@Controller则需要在方法上加@ResponseBody
@RestController
public class FileUploadController {

    @PostMapping(value = "/uploadfile", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public String uploadFile(@RequestParam("file") MultipartFile file, 
                             @RequestParam("contracttemplateid") Long id) {
        // 此处编写文件存储、业务逻辑处理代码
        return "上传成功";
    }
}

可选配置（调整上传文件大小限制） #

在Spring Boot的application.yml/application.properties中添加配置，避免文件过大被拦截：

spring:
  servlet:
    multipart:
      max-file-size: 10MB # 单个文件最大大小
      max-request-size: 10MB # 整个请求的最大大小

内容的提问来源于stack exchange，提问作者sai krishna reddy