如何在Node.js(Express)中解析FormData提交的Base64图片数据

1. 先修正前端代码的核心错误 #

你前端的问题出在手动设置了错误的Content-Type：当使用FormData作为fetch的body时，浏览器会自动生成带boundary的multipart/form-data请求头，完全不需要手动指定application/x-www-form-urlencoded——这个错误直接导致后端收到的数据格式混乱，常规文件解析工具无法正常识别。

修正后的前端代码：

var src = document.getElementById('hdrimg').src;
var formData = new FormData()
formData.append("image", src);
let response = await fetch('http://localhost:3000/hdrimg', {
  method: 'POST',
  // 移除手动设置的Content-Type，让浏览器自动处理请求头
  body: formData
});

2. 前端修正后，后端用multer正常解析 #

前端调整后，后端可以直接用multer解析FormData中的base64字符串，示例代码：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer(); // 不需要磁盘存储，仅处理内存中的表单数据

app.post('/hdrimg', upload.none(), (req, res) => {
  // req.body.image 即为提交的完整base64字符串
  const base64Content = req.body.image.split(',')[1]; // 去掉"data:image/png;base64,"前缀
  // 后续可将base64转成文件或做其他处理
  res.status(200).send('base64数据接收成功');
});

app.listen(3000, () => console.log('服务运行在3000端口'));

这里用upload.none()是因为提交的是字符串类型的base64，而非二进制文件，multer会自动解析FormData中的普通字段。

3. 若前端无法修改，后端手动解析原始请求体 #

如果没办法调整前端代码，后端可以直接读取原始请求体，手动分割提取base64内容：

const express = require('express');
const app = express();

// 配置中间件，接收原始格式的请求体
app.use(express.raw({ type: '*/*' }));

app.post('/hdrimg', (req, res) => {
  const rawBody = req.body.toString();
  // 按换行符分割内容，定位到base64所在行
  const contentLines = rawBody.split('\r\n');
  const base64Line = contentLines.find(line => line.startsWith('data:image/'));
  
  if (base64Line) {
    const base64Content = base64Line.split(',')[1];
    // 处理提取到的base64数据
    res.status(200).send('原始数据解析成功');
  } else {
    res.status(400).send('未找到有效base64数据');
  }
});

app.listen(3000, () => console.log('服务运行在3000端口'));

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