Vue 3 中视频上传后自动截取封面需完成上传→加载→定位帧→绘制→导出四步闭环，全程浏览器端处理；关键在监听 loadedmetadata 事件、中点选帧、Canvas 宽高同步设置及封装为组合式函数 useVideoCover。
Vue 3 中实现视频文件上传后自动截取封面，核心是“上传→加载→定位帧→绘制→导出”四步闭环，全程在浏览器完成，无需上传视频到服务端处理。
上传后立即触发封面提取
监听文件选择事件，拿到 File 对象后，用 URL.createObjectURL() 创建本地可播放的临时地址，绑定到隐藏的 <video></video> 元素上。关键点在于等 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<string null></string> 和 isLoading: Ref<boolean></boolean>，便于在任意组件中调用。例如：
- 上传组件里
onSuccess中直接调用：const { coverUrl } = useVideoCover(file) - 结合
v-if="coverUrl"控制封面图片显示，v-else显示 loading 占位图 - 失败时抛出错误（如视频损坏、不支持格式），统一提示“封面生成失败，请重试”
