向Node服务器发送Uint8Array/Blob音频时接收为空对象的问题

我尝试将Blob音频与其他数据一同上传至Node服务器，其他数据传输正常，但Blob相关的report.tick和report.audio在服务器端接收为空对象，处理遇到困难。

前端请求代码 #

$report(p:{report: THREE.Report, user: THREE.Employee, lang?: any}): Observable<any> {
    if(!p.lang) p.lang = this.userService.words.clang
    console.log("Report:", p)
    
    return this.http.post(`${this.baseUrl}/store`, p);
}

数据详情 #

• THREE.Report结构：包含audio（Blob类型）、tick等字段
• 请求发送前的p对象：report.audio为Blob实例（含size、type属性），report.tick有具体值，其余数据正常
• 服务器端console.log(req.body)结果：report.tick和report.audio变为空对象{}，其余数据正常接收

原因 #

Angular的HttpClient.post默认用JSON格式发送请求，而Blob是二进制对象，JSON无法序列化Blob类型，会被强制转为空对象，导致二进制数据丢失。

解决方法 #

前端修改：用FormData封装所有数据 #

将包含Blob的请求改为FormData格式，它支持二进制数据传输：

$report(p:{report: THREE.Report, user: THREE.Employee, lang?: any}): Observable<any> {
    if(!p.lang) p.lang = this.userService.words.clang
    console.log("Report:", p)
    
    const formData = new FormData();
    // 普通数据转为JSON字符串后追加
    formData.append('user', JSON.stringify(p.user));
    formData.append('lang', p.lang);
    // 直接追加Blob类型的音频
    formData.append('reportAudio', p.report.audio);
    // 追加tick字段
    formData.append('reportTick', p.report.tick);
    // 若report还有其他字段，按同理方式追加

    return this.http.post(`${this.baseUrl}/store`, formData);
}

服务器端修改：用multer处理multipart请求 #

因为FormData采用multipart/form-data编码，需要用multer中间件解析：

1. 安装依赖：

npm install multer --save

2. 服务器代码示例：

const express = require('express');
const multer = require('multer');
const app = express();
// 配置multer，这里选择内存存储，如需保存到磁盘可设置dest参数
const upload = multer({ storage: multer.memoryStorage() });

app.post('/store', upload.any(), (req, res) => {
    // 解析普通字段
    const user = JSON.parse(req.body.user);
    const lang = req.body.lang;
    const reportTick = req.body.reportTick;
    // 获取Blob音频数据
    const reportAudio = req.files.find(file => file.fieldname === 'reportAudio');
    
    // 后续处理：比如将audio.buffer写入文件或存储到数据库
    console.log('接收完成：', { user, lang, reportTick, audioSize: reportAudio?.size });
    res.status(200).send('上传成功');
});

补充说明 #

• 不要直接将包含Blob的对象通过JSON格式发送，JSON不支持二进制类型的序列化
• 若THREE.Report还有其他非Blob字段，可将这些字段打包成JSON字符串后通过FormData追加，避免逐个字段拆分

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