如何正确将React采集的图片发送至Java后端并正常解析

问题1：Base64内容带前缀导致解码错误 #

react-webcam的getScreenshot()返回的Base64字符串默认带有data:image/jpeg;base64,的格式前缀，这部分不属于图片二进制内容，直接解码会生成无效的字节数组，导致ImageIO无法识别图片格式返回null。
修复方案：前端发送前先移除前缀：

const rawBase64 = props.image.split(',')[1];
formData.append("file", rawBase64);

问题2：请求头配置错误 #

你手动设置的Content-Type值错误，正确值应为multipart/form-data（缺少中间的横杠），且手动设置该头会丢失multipart请求必需的boundary参数，反而会导致请求格式异常。
修复方案：直接删除axios请求中的headers配置，axios发送FormData时会自动生成正确的Content-Type头：

axios
  .post("http://localhost:8080/api/storeImage", formData)
  .catch((err) => {
    throw err;
  });

问题3：Java代码变量名错误 #

你的服务层代码中，解码后的字节数组变量名为decodedSource，但传入ByteArrayInputStream的变量是未定义的decoded，如果实际运行代码存在这个问题，会直接导致传入无效的字节流。
修复方案：修正变量名：

byte[] decodedSource = Base64.getMimeDecoder().decode(source);
BufferedImage image = ImageIO.read(new ByteArrayInputStream(decodedSource));

可选校验步骤 #

如果修改后仍返回null，可先将解码后的字节数组写入本地文件验证有效性：

FileOutputStream fos = new FileOutputStream("test.jpg");
fos.write(decodedSource);
fos.close();

如果test.jpg可以正常打开，说明是ImageIO解码器问题，可尝试引入第三方图片处理库如TwelveMonkeys扩展ImageIO的格式支持；如果无法打开，说明前端传输的Base64内容存在丢失、转义等问题，可打印前后端的Base64字符串对比是否一致。

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