AngularJS选取图片转Base64上传Spring Batch后端存数据库Blob字段如何实现？

1. 方案选择说明 #

你提到的将图片转Base64后传给后端、再存Blob的方案是完全可行的，刚好匹配你当前的要求，另外也可以给你提供另一种可选方案做参考：

• 转Base64方案：优点是传输时可以直接把Base64字符串放到普通JSON请求体里，不需要处理多表单提交逻辑，新手友好。缺点是Base64会让数据体积膨胀约1/3，传输和转码有额外开销。
• FormData直传方案：前端直接把文件对象塞入FormData，以multipart/form-data格式提交给后端，后端直接读取文件输入流存Blob，不需要转Base64，性能更好。如果你们没有强制要求必须走Base64链路可以选这个，否则按你原定的Base64方案实现即可。

2. 前端Base64转换具体实现 #

你用的是AngularJS框架，onFileSelected方法可以参考下面的实现，基于原生FileReaderAPI完成转换：

$scope.onFileSelected = function (element) {
  // 获取选中的文件对象
  const selectedFile = element.files[0];
  if (!selectedFile) return;

  // 校验文件类型，和input的accept属性对应
  if (selectedFile.type !== "image/jpeg") {
    alert("仅支持上传JPG格式的图片");
    return;
  }

  // 初始化文件读取器
  const fileReader = new FileReader();
  // 读取完成后的回调
  fileReader.onload = function (e) {
    // e.target.result 就是带前缀的完整Base64字符串
    const imgBase64 = e.target.result;
    // 因为FileReader回调在AngularJS上下文外，需要手动触发脏检查更新绑定
    $scope.$apply(() => {
      $scope.img_icon = imgBase64;
    });
    // 如需本地预览，直接把imgBase64赋值给img标签的src属性即可
  };
  // 以DataURL格式读取文件，直接生成Base64结果
  fileReader.readAsDataURL(selectedFile);
};

后续提交请求的时候，直接把$scope.img_icon的值传给后端即可。

3. 后端Java存储参考 #

后端拿到Base64字符串后，只需要去掉前缀、解码为字节数组，就可以直接存入数据库Blob字段：

import java.util.Base64;

// 省略其他业务逻辑
// 1. 拿到前端传的Base64字符串
String frontBase64 = xxx; // 从请求参数/JSON体中取值
// 2. 去掉Base64标识前缀
if (frontBase64.startsWith("data:image/jpeg;base64,")) {
    frontBase64 = frontBase64.substring("data:image/jpeg;base64,".length());
}
// 3. 解码为字节数组
byte[] imgBytes = Base64.getDecoder().decode(frontBase64);
// 4. 存入数据库：MyBatis可直接把字节数组赋值给对应实体类属性，JDBC可调用PreparedStatement的setBytes/setBlob方法写入Blob字段

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