如何在Node.js中通过摄像头上传Blob格式视频？

你当前代码的核心问题是：传给服务器的blob格式URL只是浏览器本地的临时引用，服务器无法通过该URL获取实际视频数据，必须直接上传Blob文件本身。以下是修正后的实现方案：

前端代码修改 #

使用FormData封装Blob数据，确保服务器能接收实际文件：

media_recorder.addEventListener('stop', function() {
    // 创建视频Blob对象
    const videoBlob = new Blob(blobs_recorded, { type: 'video/webm' });
    // 用FormData封装文件
    const formData = new FormData();
    formData.append('video', videoBlob, 'recorded-video.webm'); // 第三个参数为文件名

    $.ajax({
        type: 'POST',
        url: '/save', // 与后端路由保持一致
        data: formData,
        processData: false, // 禁止jQuery自动处理数据格式
        contentType: false, // 让浏览器自动设置正确的Content-Type
        success: () => console.log('上传成功'),
        error: (err) => console.error('上传失败', err)
    });
});

后端代码修改 #

需要使用multer中间件处理FormData格式的文件上传，步骤如下：

1. 安装multer依赖：

npm install multer

2. 修改路由代码：

const express = require('express');
const router = express.Router();
const multer = require('multer');

// 配置文件存储规则
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, './'); // 文件存储目录，可根据需求调整
    },
    filename: (req, file, cb) => {
        cb(null, 'Camera.webm'); // 自定义保存的文件名
    }
});

const upload = multer({ storage: storage });

// 处理文件上传请求，upload.single('video')对应FormData中的key
router.post('/save', upload.single('video'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('未接收到视频文件');
    }
    res.status(200).send('ok');
});

module.exports = router;

关键注意事项 #

• 前后端路由必须统一：前端请求地址要和后端router.post的路径一致，避免404错误。
• 前端必须设置processData: false和contentType: false，否则会破坏FormData的格式，导致服务器无法解析文件。
• multer会自动将文件保存到配置的目录，无需手动调用fs.writeFile。

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