element ui上传视频拿封面

### 实现思路 要实现上传视频后自动截取封面的功能，可以通过 `Element UI` 的上传组件来获取视频文件的本地路径，并利用 HTML5 的 `<video>` 和 Canvas API 来完成视频截图操作。以下是具体的技术细节： #### 获取视频文件 通过 `Element UI` 的上传组件回调函数（如 `on-change`），可以捕获用户选择的视频文件对象。此文件对象可通过 `FileReader` 或者 `URL.createObjectURL()` 方法转换为可访问的本地资源链接。 ```javascript changelist(file, fileList) { const URL = window.URL || window.webkitURL; this.videoUrl = URL.createObjectURL(file.raw); // 转换为视频播放可用的 URL } ``` 上述代码片段展示了如何在 `changeList` 函数中获取视频文件并创建其临时 URL[^1]。 #### 使用 Video 对象加载视频 一旦获得了视频的本地地址，就可以将其绑定到 `<video>` 元素上进行加载和控制。这一步骤允许我们进一步处理视频帧。 ```html <video ref="videoPlayer" style="display:none;"></video> ``` ```javascript this.$refs.videoPlayer.src = this.videoUrl; // 设置 video 元素的 src 属性 this.$refs.videoPlayer.load(); // 加载视频 ``` #### 截取视频封面 当视频加载完成后，我们可以监听 `loadedmetadata` 事件以确保视频元数据已准备好。随后，使用 Canvas 绘制当前时间点的画面作为封面图片。 ```javascript this.$refs.videoPlayer.addEventListener('loadeddata', () => { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = this.$refs.videoPlayer.videoWidth; // 设置画布宽度等于视频宽度 canvas.height = this.$refs.videoPlayer.videoHeight; // 设置画布高度等于视频高度 this.$refs.videoPlayer.currentTime = 0; // 定位至第 0 秒位置 setTimeout(() => { // 确保 currentTime 已生效后再绘制画面 context.drawImage(this.$refs.videoPlayer, 0, 0, canvas.width, canvas.height); this.coverImage = canvas.toDataURL('image/png'); // 将 Canvas 图像转为 Base64 编码字符串 }, 100); }); ``` 以上代码实现了从视频的第一帧提取图像并保存为 Base64 数据 URI。 --- ### Vue 高亮搜索关键字功能扩展 如果还需要结合高亮搜索关键字的需求，则可以在展示封面的同时对相关文字描述应用高亮逻辑。例如，假设有一个字段用于存储视频标题或其他说明信息，那么可以根据用户的输入动态替换其中的关键字部分。 ```javascript highlightKeyword(text, keyword) { if (!keyword) return text; const regex = new RegExp(`(${keyword})`, 'gi'); return text.replace(regex, '<span class="highlight">$1</span>'); } ``` 调用该方法时传递原始文本以及待匹配的关键字参数即可返回带有标记的内容[^2]。 最终样式定义如下： ```css .highlight { color: red; font-weight: bold; } ``` --- ### 总结代码示例 完整的 Vue 组件可能看起来像这样： ```vue <template> <div> <el-upload :auto-upload="false" @change="changelist"> <button>点击上传视频</button> </el-upload> <img v-if="coverImage" :src="coverImage" alt="Video Cover"/> <!-- 假设存在 title 字段 --> <p v-html="highlightedTitle"></p> </div> </template> <script> export default { data() { return { videoUrl: '', coverImage: null, title: '这是一个测试视频', searchKeyword: '' }; }, computed: { highlightedTitle() { return this.highlightKeyword(this.title, this.searchKeyword); } }, methods: { changelist(file, fileList) { const URL = window.URL || window.webkitURL; this.videoUrl = URL.createObjectURL(file.raw); const videoElm = this.$refs.videoPlayer; videoElm.src = this.videoUrl; videoElm.load(); videoElm.addEventListener('loadeddata', () => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = videoElm.videoWidth; canvas.height = videoElm.videoHeight; videoElm.currentTime = 0; setTimeout(() => { ctx.drawImage(videoElm, 0, 0, canvas.width, canvas.height); this.coverImage = canvas.toDataURL('image/png'); }, 100); }); }, highlightKeyword(text, keyword) { if (!keyword) return text; const regex = new RegExp(`(${keyword})`, 'gi'); return text.replace(regex, '<span class="highlight">$1</span>'); } } }; </script> <style scoped> .highlight { color: red; font-weight: bold; } </style> ``` --- ###