ReactJs中无法上传录制视频mediaBlobUrl至服务器的解决方法

前端（React）实现步骤 #

• 从react-media-recorder获取录制完成的mediaBlobUrl
• 将blob URL转换为Blob对象，封装成FormData发送上传请求

import { ReactMediaRecorder } from "react-media-recorder";

const VideoRecorder = () => {
  const handleUpload = async (mediaBlobUrl) => {
    try {
      // 把blob URL转为Blob对象
      const response = await fetch(mediaBlobUrl);
      const videoBlob = await response.blob();

      // 构建FormData，用于文件上传
      const formData = new FormData();
      // 自定义文件名，默认录制格式为webm
      formData.append("video", videoBlob, `recording-${Date.now()}.webm`);

      // 发送POST请求到后端接口
      const uploadResponse = await fetch("http://localhost:5000/api/upload-video", {
        method: "POST",
        body: formData,
      });

      if (uploadResponse.ok) {
        const result = await uploadResponse.json();
        console.log("上传成功", result);
      } else {
        console.error("上传失败");
      }
    } catch (error) {
      console.error("上传出错:", error);
    }
  };

  return (
    <ReactMediaRecorder
      video
      render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
        <div>
          <p>{status}</p>
          <button onClick={startRecording}>开始录制</button>
          <button onClick={stopRecording}>停止录制</button>
          {mediaBlobUrl && (
            <>
              <video src={mediaBlobUrl} controls />
              <button onClick={() => handleUpload(mediaBlobUrl)}>上传视频</button>
            </>
          )}
        </div>
      )}
    />
  );
};

export default VideoRecorder;

后端（Node.js + Express）实现步骤 #

• 用Express搭建服务器，配合multer处理文件上传，cors解决跨域问题

首先安装依赖：

npm install express multer cors

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

const app = express();
const port = 5000;

// 配置跨域
app.use(cors());

// 配置文件存储路径与文件名规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const uploadDir = path.join(__dirname, 'uploads');
    // 自动创建uploads目录
    if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir, { recursive: true });
    }
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名，避免重复
    const uniqueName = `${Date.now()}-${Math.round(Math.random() * 1E9)}-${file.originalname}`;
    cb(null, uniqueName);
  }
});

// 初始化multer，限制文件大小（示例为50MB）
const upload = multer({
  storage: storage,
  limits: { fileSize: 50 * 1024 * 1024 },
  // 可选：添加文件类型验证
  fileFilter: (req, file, cb) => {
    if (file.mimetype.startsWith('video/')) {
      cb(null, true);
    } else {
      cb(new Error('仅支持视频文件上传'));
    }
  }
});

// 视频上传接口
app.post('/api/upload-video', upload.single('video'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ message: '未检测到视频文件' });
  }

  // 可在此添加数据库记录、格式转换等后续逻辑
  res.status(200).json({
    message: '视频上传成功',
    filePath: req.file.path,
    fileName: req.file.filename
  });
});

app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

注意事项 #

• react-media-recorder默认输出webm格式，如需其他格式，可通过mediaRecorderOptions参数配置
• 确保后端uploads目录有写入权限，生产环境建议使用云存储替代本地存储
• 可根据业务需求扩展文件验证、错误处理、断点续传等功能

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