超大视频上传需分层处理：小文件（≤20MB）用Compressor.js或MediaRecorder轻量压缩；中大文件（20MB–500MB）分片上传+快速校验；超大文件（≥500MB）禁用前端压缩，直连分片上传+服务端转码。
处理超大视频文件的上传，不能只靠“压缩完再传”这一种思路。真正可行的方案是分层应对：小文件（≤20MB）可走前端压缩；中大文件（20MB–500MB）推荐分片+轻量预处理；超大文件（≥500MB）必须依赖分片上传+服务端协同，前端压缩反而会卡死浏览器或耗尽内存。
小视频：用 Compressor.js 或 MediaRecorder 做轻量压缩
适用于短视频、用户自拍类内容（如 10–20MB 内的 MP4）。这类文件体积尚可控，压缩能明显提速且不伤体验。
- Compressor.js：专为图像/视频设计，支持设置 quality（0.6–0.8 较平衡）、maxWidth/maxHeight（如 1280×720）、自动旋转修正。注意它对视频支持有限，仅适用于 H.264 编码且时长较短的 MP4 文件。
- MediaRecorder：更灵活，可实时采集 video 元素流并重编码为低码率 MP4 或 WebM。适合需要控制帧率（如 15fps）、比特率（如 1.5Mbps）的场景，但兼容性略弱（Safari 支持 WebM 有限，建议 fallback 到 MP4）。
- 压缩后务必校验：
file.type是否仍为video/mp4或video/webm，file.size是否显著下降（建议压缩后 ≤原大小 60%），否则跳过压缩直接上传。
中大型视频：分片上传 + 上传前快速校验与预处理
20MB 到 500MB 的教学视频、会议录像等，压缩收益低、耗时高，应放弃全量前端压缩，转而聚焦“可控分片”和“精准校验”。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 在
before-upload钩子中完成三件事：检查 MIME 类型（file.type.startsWith('video/')）、读取真实后缀（file.name.split('.').pop()）、比对大小是否超限（如 500MB）。 - 启用分片逻辑：按 5MB/片切分（
chunkSize = 5 * 1024 * 1024），每片生成唯一标识（如file.name + '-' + index或 MD5 片段 hash），便于服务端合并与断点续传。 - 不压缩，但可做元数据轻处理：用
ffprobe（若已集成 FFmpeg.wasm）或浏览器原生URL.createObjectURL(file)+video.duration快速获取时长，用于 UI 提示（如“预计上传 8 分钟”）。
超大视频（≥500MB）：绕过前端压缩，直连分片上传 + 后端转码
工程类视频、4K 录屏、10G+ 原始素材，前端压缩既不可行也不必要。此时核心是稳定传输 + 后端智能处理。
立即学习“前端免费学习笔记（深入）”；
- 禁用所有前端压缩逻辑，避免主线程阻塞、内存溢出或长时间白屏。用户选择文件后立即进入分片队列，UI 显示“准备上传中…”而非“正在压缩…”。
- 选用成熟分片库：Vue2 项目优先用 WebUploader（HTML5 模式），Vue3 推荐封装 SparkMD5 + axios 自研分片器，支持并发数控制（
threads: 3）、失败重试、进度回调。 - 服务端接收分片后，统一由 FFmpeg 异步转码：例如将原始 HEVC 视频转为 H.264 baseline + 自适应分辨率（
-vf "scale='min(1280,iw)':-2"），再合并输出。前端只需监听上传完成事件，跳转至“转码中”状态页。
关键细节与避坑提醒
无论哪一类，以下三点必须落地：
-
文件名规范化：上传前把中文、空格、特殊符号替换成下划线，例如
filename.replace(/[\u4e00-\u9fa5\s\W]/g, '_')，避免后端路径解析失败。 -
取消默认上传行为：iview / Element Plus 的 Upload 组件需设
:action="null"并return false在before-upload，否则会触发两次请求。 - 错误兜底机制：网络中断时保存已上传分片索引到 localStorage；用户刷新页面后，先向服务端查询已存在分片列表，跳过重复上传。
