如何将Blob与其他类型数据发送至Node.js Express服务器

原服务器使用express.raw()会将整个请求体解析为单一Buffer，无法同时获取Blob和附加参数——因为req.body就是这个Buffer，不存在req.body.buffer、req.body.nbrVoice这类属性。正确的做法是用FormData在前端打包Blob和参数，后端用multer解析multipart/form-data格式的请求。

前端实现（Fetch版） #

// 假设已获取到blob、codeUser、nbrVoice变量
const formData = new FormData();
// 追加音频Blob，第三个参数可选，用于指定文件名
formData.append('audioBlob', blob);
formData.append('codeUser', codeUser);
formData.append('nbrVoice', nbrVoice);

fetch('/microphone', {
  method: 'POST',
  body: formData
})
.then(res => res.text())
.then(msg => console.log(msg))
.catch(err => console.error('上传失败:', err));

前端实现（XMLHttpRequest版） #

const formData = new FormData();
formData.append('audioBlob', blob);
formData.append('codeUser', codeUser);
formData.append('nbrVoice', nbrVoice);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/microphone');
xhr.onload = () => {
  xhr.status === 200 ? console.log(xhr.responseText) : console.error('上传失败:', xhr.status);
};
xhr.onerror = () => console.error('网络请求出错');
xhr.send(formData);

后端实现（Express + Multer） #

1. 先安装multer依赖：

npm install multer

2. 修改服务器代码：

const express = require('express');
const fs = require('fs');
const path = require('path');
const multer = require('multer');
const app = express();

// 配置multer使用内存存储，方便直接获取Blob的Buffer
const storage = multer.memoryStorage();
const upload = multer({ storage });

app.post('/microphone', upload.single('audioBlob'), (req, res) => {
  try {
    // 从multer解析结果中获取音频Buffer和表单参数
    const audioBuffer = req.file.buffer;
    const { nbrVoice, codeUser } = req.body;

    // 构建用户目录路径，确保目录存在
    const userDir = path.join('users', codeUser);
    if (!fs.existsSync(userDir)) {
      fs.mkdirSync(userDir, { recursive: true });
    }

    // 构建文件路径并写入
    const filePath = path.join(userDir, `${nbrVoice}_microphone.wav`);
    fs.writeFileSync(filePath, audioBuffer);

    res.send("Okay wav file saved");
  } catch (err) {
    console.error('文件保存失败:', err);
    res.status(500).send("文件保存失败");
  }
});

// 启动服务器示例
app.listen(3000, () => console.log('服务器运行在 http://localhost:3000'));

关键说明 #

• 原代码语法错误修正：res.send( "Okay wav file saved ); 需补全闭合引号，改为res.send("Okay wav file saved");
• 替换fs.appendFileSync为fs.writeFileSync：若目标文件已存在，追加操作会损坏音频文件，覆盖写入更合理
• 目录添加递归创建：fs.mkdirSync的recursive: true参数可自动创建不存在的父目录，避免报错

内容的提问来源于stack exchange，提问作者Jérémie Rousseau