如何将Canvas生成的Blob URL保存为MongoDB中的新文档

看起来你已经搞定了Canvas录制生成Blob的部分，接下来要把这个Blob存到MongoDB对吧？这里给你一套完整的前后端实现方案，直接就能用：

一、前端修改：将Blob发送到后端 #

你当前的recorder.stop回调里已经拿到了blob对象，不用管Blob URL，直接把blob通过HTTP请求传给后端即可。这里用fetch为例：

recorder.stop(function(blob) {
  // 创建FormData，用于传输二进制文件
  const formData = new FormData();
  formData.append('canvasRecording', blob, 'canvas-recording.webm'); // 第三个参数是文件名，按需修改

  // 发送到后端接口
  fetch('/api/save-canvas-recording', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('录制文件已成功保存到MongoDB:', data);
  })
  .catch(error => {
    console.error('保存失败:', error);
  });
});

二、后端实现（Node.js + Express + Mongoose） #

1. 安装依赖 #

首先确保你已经初始化了Node.js项目，然后安装需要的包：

npm install express mongoose multer

• express：搭建后端服务器
• mongoose：MongoDB的ODM框架，简化操作
• multer：处理前端传来的FormData（二进制文件）

2. 定义MongoDB Schema #

创建一个Recording.js文件，定义存储录制文件的Schema：

const mongoose = require('mongoose');

const recordingSchema = new mongoose.Schema({
  filename: String, // 文件名
  contentType: String, // 文件类型（比如video/webm）
  data: Buffer // 存储二进制数据，适合小文件（<16MB）
});

module.exports = mongoose.model('Recording', recordingSchema);

如果你的录制文件超过16MB（MongoDB单文档大小限制），建议使用GridFS来存储，后面会补充说明。

3. 搭建后端服务器和接口 #

创建server.js文件：

const express = require('express');
const mongoose = require('mongoose');
const multer = require('multer');
const Recording = require('./Recording');

const app = express();
const upload = multer(); // 使用内存存储，适合小文件

// 连接MongoDB
mongoose.connect('mongodb://localhost:27017/your-database-name', {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(() => console.log('MongoDB连接成功'))
.catch(err => console.error('MongoDB连接失败:', err));

// 处理保存录制文件的接口
app.post('/api/save-canvas-recording', upload.single('canvasRecording'), async (req, res) => {
  try {
    // 从req.file中获取文件信息
    const { originalname, mimetype, buffer } = req.file;

    // 创建新的Recording文档
    const newRecording = new Recording({
      filename: originalname,
      contentType: mimetype,
      data: buffer
    });

    // 保存到MongoDB
    await newRecording.save();

    res.status(200).json({
      message: '文件保存成功',
      recordingId: newRecording._id
    });
  } catch (err) {
    res.status(500).json({ message: '保存失败', error: err.message });
  }
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`服务器运行在端口 ${PORT}`));

三、大文件处理（>16MB）：使用GridFS #

如果你的Canvas录制文件比较大，超过了MongoDB单文档16MB的限制，就需要用GridFS来分片存储。修改后端代码如下：

1. 初始化GridFS #

在server.js中添加：

const { GridFSBucket } = require('mongodb');

// 连接成功后初始化GridFSBucket
mongoose.connection.once('open', () => {
  global.gridFSBucket = new GridFSBucket(mongoose.connection.db, {
    bucketName: 'canvasRecordings' // 自定义存储桶名称
  });
});

2. 修改上传接口 #

app.post('/api/save-canvas-recording', upload.single('canvasRecording'), (req, res) => {
  try {
    const { originalname, mimetype } = req.file;

    // 创建上传流
    const uploadStream = gridFSBucket.openUploadStream(originalname, {
      contentType: mimetype
    });

    // 将文件buffer写入流
    uploadStream.end(req.file.buffer);

    uploadStream.on('finish', () => {
      res.status(200).json({
        message: '大文件保存成功',
        fileId: uploadStream.id
      });
    });
  } catch (err) {
    res.status(500).json({ message: '保存失败', error: err.message });
  }
});

四、注意事项 #

• 确保你的MongoDB服务已经启动，并且连接字符串中的数据库名称正确
• 前端和后端要运行在允许跨域的环境下，如果是开发阶段，可以在后端添加cors中间件（npm install cors，然后app.use(cors())）
• 存储的二进制数据可以后续通过后端接口读取，返回给前端播放或者下载

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