Angular上传ImageData转Base64至Spring后端，MultipartFile接收为空

核心问题 #

1. 前端传递的是Base64字符串而非文件流：当前代码把canvas.toDataURL()生成的Base64字符串直接塞进FormData，而Spring的MultipartFile需要的是二进制文件数据，无法解析字符串格式的内容。
2. Spring控制器参数注解错误：@RequestBody用于接收JSON或表单编码的请求体，不能用来接收multipart/form-data类型的文件，应该用@RequestParam或@RequestPart。
3. 请求头声明冲突：控制器同时指定了APPLICATION_FORM_URLENCODED_VALUE和MULTIPART_FORM_DATA_VALUE两种消费类型，会导致请求解析逻辑混乱。

修复步骤 #

1. 前端修改：将Base64转为Blob后传入FormData #

直接把Canvas内容转为Blob二进制对象，再添加到FormData中，避免Base64转码的额外开销：

Angular组件代码

beforeSave(args: any): void {
  const imageEditor: ImageEditorComponent = getComponent(document.getElementById('image-editor')!, 'image-editor');
  args.cancel = true;

  // 基于ImageData生成Canvas
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = imageEditor.getImageData().width;
  canvas.height = imageEditor.getImageData().height;
  ctx!.putImageData(imageEditor.getImageData(), 0, 0);

  // 将Canvas转为Blob并调用上传接口
  canvas.toBlob((blob) => {
    if (blob) {
      this.learningContentService.saveImageInTempLocation(blob, "temp", args.fileType).subscribe(res => console.warn(res));
    }
  }, `image/${args.fileType}`);
}

Angular服务代码

saveImageInTempLocation(image: Blob, imageName: string, imageFormat: string): Observable<HttpResponse<string>> {
  const formData = new FormData();
  // 第三个参数指定文件名，后端可通过MultipartFile获取
  formData.append('image', image, `${imageName}.${imageFormat}`);

  return this.http.post<string>(
    `${this.resourceUrl}/save-image?imageName=${imageName}&imageFormat=${imageFormat}`, 
    formData,
    { observe: 'response' }
  );
}

2. Spring控制器修改：修正注解与请求配置 #

移除冲突的请求头声明，改用正确的参数注解接收文件：

@PostMapping(
    path="/save-image",
    consumes = MediaType.MULTIPART_FORM_DATA_VALUE, 
    produces = MediaType.APPLICATION_JSON_VALUE
)
public ResponseEntity<String> saveImageForLearningContent(
    @RequestParam("image") MultipartFile image,
    @RequestParam("imageName") String imageName,
    @RequestParam("imageFormat") String imageFormat
) throws IOException {
    // 你的文件保存逻辑
    return ResponseEntity.ok("文件保存成功");
}

关键说明 #

• canvas.toBlob()直接生成二进制文件对象，比Base64字符串更适合文件上传场景，减少编码解码的性能损耗。
• FormData添加文件时指定文件名，方便后端处理文件的命名逻辑。
• Spring中@RequestParam是接收multipart/form-data类型文件的正确方式，@RequestBody仅适用于JSON或表单键值对请求体。

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