# video **Repository Path**: chen_chong/video ## Basic Information - **Project Name**: video - **Description**: 视频分片上传 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: https://video.jaeger-coder.fun - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-04-30 - **Last Updated**: 2026-04-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: JavaScript, 分片上传, 断点续传, node框架 ## README # 视频分片上传 - 开发文档 ## 项目概述 这是一个基于 Node.js + Express + MySQL 的视频播放平台，支持视频上传（分片上传、断点续传）、视频管理和在线播放功能。 --- ## 技术栈 ### 后端 - **Node.js** - 运行环境 - **Express** - Web 框架 - **MySQL2** - 数据库连接 - **Multer** - 文件上传处理 - **express-fileupload** - 分片文件上传 - **CORS** - 跨域支持 - **dotenv** - 环境变量管理 ### 前端 - **原生 HTML5** - 页面结构 - **Tailwind CSS** - 样式框架（CDN 引入） - **原生 JavaScript** - 交互逻辑 ### 数据库 - **MySQL** - 数据存储 --- ## 项目结构 ``` html_video/ ├── backend/ # 后端代码 │ ├── config/ │ │ └── database.js # 数据库配置 │ ├── middleware/ │ │ └── upload.js # 文件上传中间件 │ ├── models/ │ │ ├── video.js # 视频模型 │ │ └── uploadTask.js # 上传任务模型 │ ├── routes/ │ │ ├── admin.js # 管理员路由 │ │ ├── upload.js # 分片上传路由 │ │ └── videos.js # 视频路由 │ ├── .env # 环境变量 │ ├── package.json │ └── server.js # 服务器入口 ├── database/ │ └── init.sql # 数据库初始化脚本 ├── frontend/ # 前端代码 │ ├── css/ │ │ └── style.css # 自定义样式 │ ├── js/ │ │ ├── admin.js # 管理后台逻辑 │ │ ├── anti-debugger.js # 反调试脚本 │ │ ├── chunkUpload.js # 分片上传类 │ │ ├── login.js # 登录逻辑 │ │ └── main.js # 首页逻辑 │ ├── admin.html # 管理后台页面 │ ├── index.html # 首页（视频列表） │ ├── login.html # 登录页面 │ └── player.html # 视频播放页面 └── uploads/ # 上传文件存储目录 ├── videos/ # 视频文件 ├── thumbnails/ # 缩略图 └── chunks/ # 分片临时文件 ``` --- ## 数据库设计 ### 1. videos 表 - 视频信息 | 字段 | 类型 | 说明 | |------|------|------| | id | INT | 主键，自增 | | title | VARCHAR(255) | 视频标题 | | description | TEXT | 视频描述 | | filename | VARCHAR(255) | 存储的文件名 | | original_filename | VARCHAR(255) | 原始文件名 | | file_path | VARCHAR(500) | 文件存储路径 | | thumbnail_path | VARCHAR(500) | 缩略图路径 | | file_size | BIGINT | 文件大小（字节） | | duration | INT | 视频时长（秒） | | mime_type | VARCHAR(50) | 文件类型 | | created_at | TIMESTAMP | 创建时间 | | updated_at | TIMESTAMP | 更新时间 | ### 2. upload_tasks 表 - 上传任务 | 字段 | 类型 | 说明 | |------|------|------| | id | INT | 主键，自增 | | task_id | VARCHAR(64) | 任务唯一标识（MD5） | | filename | VARCHAR(255) | 原始文件名 | | file_size | BIGINT | 文件总大小 | | chunk_size | INT | 分片大小（默认5MB） | | total_chunks | INT | 总分片数 | | uploaded_chunks | INT | 已上传分片数 | | file_path | VARCHAR(500) | 最终文件路径 | | thumbnail_path | VARCHAR(500) | 缩略图路径 | | title | VARCHAR(255) | 视频标题 | | description | TEXT | 视频描述 | | status | ENUM | 状态：uploading/merging/completed/failed | | video_id | INT | 合并后生成的视频ID | | created_at | TIMESTAMP | 创建时间 | | updated_at | TIMESTAMP | 更新时间 | ### 3. upload_chunks 表 - 分片记录 | 字段 | 类型 | 说明 | |------|------|------| | id | INT | 主键，自增 | | task_id | VARCHAR(64) | 所属任务ID | | chunk_index | INT | 分片索引（从0开始） | | chunk_size | INT | 分片大小 | | chunk_path | VARCHAR(500) | 分片存储路径 | | created_at | TIMESTAMP | 创建时间 | ### 4. admins 表 - 管理员 | 字段 | 类型 | 说明 | |------|------|------| | id | INT | 主键，自增 | | username | VARCHAR(50) | 用户名 | | password_hash | VARCHAR(255) | 密码哈希 | | created_at | TIMESTAMP | 创建时间 | --- ## API 接口文档 ### 视频相关接口 #### 1. 获取视频列表 - **URL**: `GET /api/videos` - **响应**: ```json { "success": true, "data": [ { "id": 1, "title": "视频标题", "description": "视频描述", "thumbnail_url": "/uploads/thumbnails/xxx.jpg", "duration": 120, "created_at": "2024-01-01 12:00:00" } ] } ``` #### 2. 获取单个视频详情 - **URL**: `GET /api/videos/:id` - **响应**: ```json { "success": true, "data": { "id": 1, "title": "视频标题", "description": "视频描述", "video_url": "/uploads/videos/xxx.mp4", "thumbnail_url": "/uploads/thumbnails/xxx.jpg", "duration": 120, "file_size": 10485760, "created_at": "2024-01-01 12:00:00" } } ``` #### 3. 上传视频（传统方式） - **URL**: `POST /api/videos/upload` - **Content-Type**: `multipart/form-data` - **参数**: - `video`: 视频文件（必填） - `thumbnail`: 缩略图文件（可选） - `title`: 视频标题（必填） - `description`: 视频描述（可选） #### 4. 上传缩略图 - **URL**: `POST /api/videos/:id/thumbnail` - **Content-Type**: `multipart/form-data` - **参数**: - `thumbnail`: 缩略图文件 #### 5. 删除视频 - **URL**: `DELETE /api/videos/:id` - **响应**: ```json { "success": true, "message": "视频删除成功" } ``` ### 分片上传接口 #### 1. 初始化上传任务 - **URL**: `POST /api/upload/init` - **Content-Type**: `application/json` - **请求体**: ```json { "filename": "video.mp4", "fileSize": 104857600, "title": "视频标题", "description": "视频描述" } ``` - **响应**: ```json { "success": true, "data": { "taskId": "abc123...", "totalChunks": 20, "chunkSize": 5242880, "uploadedChunks": [0, 1, 2], "status": "uploading" } } ``` #### 2. 上传分片 - **URL**: `POST /api/upload/chunk` - **Content-Type**: `multipart/form-data` - **参数**: - `taskId`: 任务ID - `chunkIndex`: 分片索引 - `chunk`: 分片文件数据 #### 3. 获取上传状态 - **URL**: `GET /api/upload/status/:taskId` - **响应**: ```json { "success": true, "data": { "taskId": "abc123...", "totalChunks": 20, "uploadedChunks": [0, 1, 2], "chunkSize": 5242880, "status": "uploading", "progress": 15 } } ``` #### 4. 合并分片 - **URL**: `POST /api/upload/merge` - **Content-Type**: `multipart/form-data` - **参数**: - `taskId`: 任务ID - `thumbnail`: 缩略图文件（可选） - **响应**: ```json { "success": true, "message": "文件合并成功", "data": { "videoId": 1 } } ``` #### 5. 取消上传任务 - **URL**: `DELETE /api/upload/:taskId` - **响应**: ```json { "success": true, "message": "上传任务已取消" } ``` ### 管理员接口 #### 1. 管理员登录 - **URL**: `POST /api/admin/login` - **Content-Type**: `application/json` - **请求体**: ```json { "username": "admin", "password": "admin123" } ``` #### 2. 获取统计数据 - **URL**: `GET /api/admin/stats` - **Headers**: `Authorization: Basic xxx` - **响应**: ```json { "success": true, "data": { "video_count": 10, "total_size": 1073741824 } } ``` --- ## 分片上传机制 ### 核心流程 1. **初始化任务** - 前端计算文件信息（文件名 + 大小） - 后端生成 task_id（MD5 哈希） - 检查是否存在未完成的任务（断点续传） - 返回任务信息和已上传的分片列表 2. **分片上传** - 每个分片大小：5MB - 支持并发上传（可配置） - 自动重试机制（最多3次） - 支持暂停/继续 3. **合并分片** - 所有分片上传完成后触发 - 使用流式合并（避免内存溢出） - 生成最终视频文件 - 创建视频数据库记录 - 清理临时分片文件 ### ChunkUploader 类 ```javascript class ChunkUploader { // 配置选项 chunkSize: 5 * 1024 * 1024, // 分片大小 maxRetries: 3, // 最大重试次数 retryDelay: 1000, // 重试延迟 // 核心方法 initUpload(file, metadata) // 初始化上传 start(thumbnailBlob) // 开始上传 uploadChunk(chunkIndex) // 上传单个分片 mergeChunks(thumbnailBlob) // 合并分片 pause() // 暂停上传 resume(thumbnailBlob) // 继续上传 cancel() // 取消上传 // 回调函数 onProgress(progress, info) // 进度回调 onChunkComplete(index, progress) onComplete(data) onError(message, error) onStatusChange(status, info) } ``` --- ## 前端页面说明 ### 1. 首页 (index.html) - 视频列表展示 - 响应式网格布局 - 视频卡片悬停效果 - 点击跳转播放页 ### 2. 播放页 (player.html) - HTML5 视频播放器 - 视频信息展示 - 返回列表按钮 ### 3. 登录页 (login.html) - 管理员登录表单 - Basic Auth 认证 - 登录状态本地存储 ### 4. 管理后台 (admin.html) - 视频上传（支持拖拽） - 分片上传进度显示 - 缩略图上传/自动生成 - 视频列表管理 - 删除视频功能 --- ## 安全特性 ### 1. 反调试保护 (anti-debugger.js) - 禁用右键菜单 - 禁用 F12 / Ctrl+Shift+I / Ctrl+U - 检测开发者工具自动跳转 - 禁用文本选择 ### 2. 管理员认证 - Basic Auth 认证 - 本地存储加密凭证 - API 请求携带认证头 ### 3. 文件上传限制 - 视频格式：MP4、WebM、MOV - 图片格式：JPG、PNG、WebP、GIF - 最大文件大小：2GB - 视频数量限制：最多5个 --- ## 环境配置 ### 环境变量 (.env) ```env # 服务器配置 PORT=3000 NODE_ENV=development # 数据库配置 DB_HOST=localhost DB_PORT=3306 DB_USER=root DB_PASSWORD=c123456 DB_NAME=video_app # 上传配置 UPLOAD_DIR=../uploads MAX_FILE_SIZE=1073741824 # 管理员配置 ADMIN_USERNAME=admin ADMIN_PASSWORD=admin123 # 文件数量限制 MAX_FILES=5 ``` --- ## 启动步骤 ### 1. 安装依赖 ```bash cd backend npm install ``` ### 2. 初始化数据库 ```bash mysql -u root -p < database/init.sql ``` ### 3. 启动服务器 ```bash # 开发模式 npm run dev # 生产模式 npm start ``` ### 4. 访问应用 - 首页：http://localhost:3000 - 管理后台：http://localhost:3000/admin - 登录页：http://localhost:3000/login --- ## 关键代码说明 ### 后端核心 #### server.js - Express 应用配置 - 中间件注册（CORS、JSON解析、文件上传） - 静态文件服务 - 路由注册 - 错误处理 #### upload.js (路由) - 分片上传业务逻辑 - 任务初始化、分片接收、合并处理 - 使用流式操作处理大文件 #### upload.js (中间件) - Multer 配置 - 动态存储（视频/缩略图分开存储） - 文件类型过滤 ### 前端核心 #### chunkUpload.js - ChunkUploader 类实现 - 分片切割、上传、重试逻辑 - 进度计算和状态管理 #### admin.js - 上传表单处理 - 拖拽上传支持 - 视频缩略图自动生成（Canvas 截取） - 视频列表管理 --- ## 扩展建议 1. **视频转码** - 集成 FFmpeg 进行视频压缩和格式转换 2. **用户系统** - 添加多用户支持和权限管理 3. **视频分类** - 添加标签和分类功能 4. **播放统计** - 记录播放次数和用户行为 5. **云存储** - 支持 OSS/S3 等云存储服务 6. **CDN 加速** - 集成 CDN 提升视频加载速度