如何实现用户通过HTML5上传视频至Node.js服务器并支持客户端回放

一、前端实现 #

创建包含文件选择、上传按钮和视频播放器的页面，通过FormData发送视频文件到后端，上传成功后加载并播放视频。

<!DOCTYPE html>
<html>
<head>
    <title>视频上传与播放</title>
</head>
<body>
    <input type="file" id="videoInput" accept="video/mp4,video/webm,video/ogg">
    <button onclick="uploadVideo()">上传视频</button>
    <video id="player" controls width="600"></video>

    <script>
        async function uploadVideo() {
            const input = document.getElementById('videoInput');
            const file = input.files[0];
            if (!file) {
                alert('请先选择视频文件');
                return;
            }

            const formData = new FormData();
            formData.append('video', file);

            try {
                const response = await fetch('/upload', {
                    method: 'POST',
                    body: formData
                });
                const data = await response.json();
                if (response.ok) {
                    const player = document.getElementById('player');
                    player.src = `/videos/${data.filename}`;
                    player.load();
                } else {
                    alert(data.error);
                }
            } catch (error) {
                console.error('上传出错:', error);
                alert('上传失败，请重试');
            }
        }
    </script>
</body>
</html>

二、后端实现 #

使用Express框架配合Multer中间件处理文件上传，同时通过静态文件服务让客户端访问已上传的视频。

1. 初始化项目并安装依赖

mkdir video-upload-server && cd video-upload-server
npm init -y
npm install express multer

2. 创建服务器文件 server.js

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

const app = express();
const PORT = 3000;

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

// 配置上传限制与文件过滤
const upload = multer({
    storage,
    limits: { fileSize: 100 * 1024 * 1024 }, // 限制100MB以内
    fileFilter: (req, file, cb) => {
        const allowedMimeTypes = ['video/mp4', 'video/webm', 'video/ogg'];
        if (allowedMimeTypes.includes(file.mimetype)) {
            cb(null, true);
        } else {
            cb(new Error('仅支持MP4、WebM、OGG格式的视频'));
        }
    }
});

// 静态文件服务：暴露uploads目录为可访问的视频资源路径
app.use('/videos', express.static(path.join(__dirname, 'uploads')));

// 处理视频上传请求
app.post('/upload', upload.single('video'), (req, res) => {
    if (!req.file) {
        return res.status(400).json({ error: '未选择视频文件' });
    }
    res.json({ filename: req.file.filename });
});

// 提供前端页面
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

// 错误处理中间件
app.use((err, req, res, next) => {
    if (err instanceof multer.MulterError) {
        res.status(400).json({ error: `上传错误: ${err.message}` });
    } else {
        res.status(400).json({ error: err.message });
    }
});

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

三、运行与测试 #

1. 将前端的index.html放在和server.js同目录下
2. 启动服务器：node server.js
3. 访问http://localhost:3000，选择视频文件上传，上传完成后即可在页面中播放

注意事项 #

• 确保服务器对uploads目录有写入权限
• 生产环境中建议添加额外安全校验，比如验证文件实际内容是否为视频，避免伪装成视频的恶意文件
• 若需支持大文件上传，可考虑实现分片上传+断点续传逻辑
• 可根据需求调整文件大小限制、允许的视频格式和文件名生成规则

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