如何将数组中的Buffer文件上传至Express服务器？

问题背景 #

我有一个包含Base64图片字符串的数组，尝试用Multer上传到Express服务器，但耗时一整天都没成功。核心问题是：前端把Base64字符串直接通过FormData传递，Multer会从req.files中查找文件，但这些内容实际在req.body里，导致Multer找不到文件并报错。

前端代码问题分析 #

原来的代码直接将Base64字符串append到FormData的files字段，Multer无法识别这种普通字符串为文件——它需要的是Blob或File类型的对象，这样FormData才会以文件形式发送请求，Multer才能在req.files中解析到内容。

修复方案（前端代码修改） #

需要先把Base64字符串转换成Blob，再封装成File对象，再添加到FormData中：

1. 实现Base64转Blob工具函数 #

function base64ToBlob(base64Str) {
  // 分离Base64的元信息和数据部分
  const [metaPart, dataPart] = base64Str.split(',');
  // 提取MIME类型
  const mimeType = metaPart.match(/:(.*?);/)[1];
  // 解码Base64数据
  const byteString = atob(dataPart);
  // 创建ArrayBuffer并填充数据
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const uint8Array = new Uint8Array(arrayBuffer);
  
  for (let i = 0; i < byteString.length; i++) {
    uint8Array[i] = byteString.charCodeAt(i);
  }
  
  return new Blob([uint8Array], { type: mimeType });
}

2. 修改FormData构建逻辑 #

const userPhoto = ["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAA"];
const formData = new FormData();

for (let i = 0; i < userPhoto.length; i++) {
  const blob = base64ToBlob(userPhoto[i]);
  // 将Blob封装为File对象，指定文件名和类型
  const file = new File([blob], `user-photo-${i}.jpg`, { type: blob.type });
  formData.append("files", file);
}

// 发送请求时无需手动设置Content-Type，axios会自动处理
axios.post(`v0/photo/${id}/User`, formData)
.then((result) => {
  console.log(result);
})
.catch((error) => {
  console.log(error);
});

关键注意点 #

• 不要手动设置Content-Type: multipart/form-data：axios在接收FormData参数时，会自动生成包含正确边界值的Content-Type，手动设置会丢失边界信息，导致Multer无法解析请求。
• 转换后的File对象要匹配后端Multer配置的字段名：后端用upload.array("files", 8)，所以FormData中append的字段名必须是files。

后端代码无需修改 #

你的后端Multer配置是正确的，只要前端发送的是标准的文件格式，Multer就能正常将文件解析到req.files中，后续的createImageConnect函数可以直接使用req.files处理文件。

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