Vue 3 中视频上传后自动截取封面需完成上传→加载→定位帧→绘制→导出四步闭环，全程浏览器端处理；关键在监听 loadedmetadata 事件、中点选帧、Canvas 宽高同步设置及封装为组合式函数 useVideoCover。

Vue 3 中实现视频文件上传后自动截取封面，核心是“上传→加载→定位帧→绘制→导出”四步闭环，全程在浏览器完成，无需上传视频到服务端处理。

上传后立即触发封面提取

监听文件选择事件，拿到 File 对象后，用 URL.createObjectURL() 创建本地可播放的临时地址，绑定到隐藏的 元素上。关键点在于等 loadedmetadata 事件（确保时长、分辨率可用），而不是 loadeddata 或 canplay——前者更早、更稳定，能避免因视频未完全加载导致的尺寸为 0 问题。

• 不建议用 setTimeout 等固定时间，不同格式/码率视频加载差异大
• 若需兼容低版本 iOS Safari，可加兜底逻辑：若 video.videoWidth === 0，尝试延迟 100ms 后再取帧

选帧策略要兼顾通用性与可控性

默认推荐截取视频中点帧（video.duration / 2），它比首帧（常为黑场或片头）和末帧（可能为黑屏或字幕）更大概率呈现主体内容。但也要支持业务定制，比如：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 传入配置项 captureTime: number | 'first' | 'middle' | 'last'
• 电商场景可设为第 3 秒（避开开场动画，进入商品展示）
• 用户上传后提供时间轴预览+点击选帧，提升自主性

Canvas 截帧必须注意宽高同步

直接调用 drawImage(video, 0, 0) 容易出错——如果 Canvas 的 width 和 height 没显式设为 video.videoWidth 和 video.videoHeight，绘制结果会拉伸、裁切或模糊。正确写法是：

• 先设置 canvas.width = video.videoWidth；canvas.height = video.videoHeight
• 再调用 context.drawImage(video, 0, 0, canvas.width, canvas.height)
• 导出时用 canvas.toDataURL('image/jpeg', 0.8) 控制体积，比 PNG 小 40%～60%，且无透明通道干扰

封装成可复用的组合式函数

把逻辑抽离为 useVideoCover(file: File, options?: { time?: number })，返回 coverUrl: Ref 和 isLoading: Ref，便于在任意组件中调用。例如：

• 上传组件里 onSuccess 中直接调用：const { coverUrl } = useVideoCover(file)
• 结合 v-if="coverUrl" 控制封面图片显示，v-else 显示 loading 占位图
• 失败时抛出错误（如视频损坏、不支持格式），统一提示“封面生成失败，请重试”

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！