React前端转换base64图片以multipart/form-data发送Java后端问题咨询

你当前代码有两个核心问题，导致后端无法识别到MultipartFile类型的图片参数：

• 直接将base64格式的字符串传入FormData，后端接收到的是纯文本内容，不符合MultipartFile要求的二进制文件格式
• 手动在请求头里设置Content-Type: multipart/form-data是错误写法，multipart/form-data请求需要携带浏览器自动生成的boundary分隔符，手动设置会导致分隔符丢失，服务端无法正常解析请求体

1. 先将base64字符串转换为浏览器原生的File/Blob二进制对象，转换时需要先剥离base64开头的data协议头（形如data:image/jpeg;base64,的前缀），再将剩余的base64内容解码为二进制数据
2. 将转换得到的File对象append到FormData中，不要直接传原始base64字符串
3. 删除fetch配置里手动写的Content-Type请求头，让浏览器自动生成带正确boundary的请求头

// base64转File对象工具方法
const base64ToFile = (base64Str, fileName = 'image.png') => {
  // 拆分base64头部和实际内容
  const [meta, content] = base64Str.split(',');
  // 解析MIME类型
  const mimeMatch = meta.match(/:(.*?);/);
  const mime = mimeMatch ? mimeMatch[1] : 'image/png';
  // 解码base64为二进制
  const binaryStr = atob(content);
  const len = binaryStr.length;
  const uint8Array = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    uint8Array[i] = binaryStr.charCodeAt(i);
  }
  return new File([uint8Array], fileName, { type: mime });
}

// 业务请求逻辑
const formData = new FormData();
// 将base64转为File对象后再传入
const imageFile = base64ToFile(store.image);
formData.append('image', imageFile); 
formData.append('id-number-value', "id"); 
formData.append('id-number-type', "id_card"); 

fetch('/path', {
  method: 'POST',
  // 删掉手动设置的Content-Type头，浏览器会自动配置
  body: formData
})
.then((response) => {
  if (response.ok) {
    // 原有业务逻辑
    return response.json();
  }
  throw new Error('请求失败');
})
.catch((error) => {
  // 原有错误处理逻辑
  console.error(error);
});

• 如果你的base64字符串不带data:image/xxx;base64,前缀，可以直接传入对应MIME类型，跳过头部解析步骤
• 生成File对象时的文件名可以根据业务需要自定义，只要MIME类型和图片实际格式匹配即可，大部分后端接口不会校验文件名字段
• 不要尝试手动拼接multipart请求体格式，浏览器提供的FormData已经做了完整的封装，手动处理很容易出现分隔符不匹配、编码错误的问题

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