Element上传组件截取视频作为视频封面

原文地址：https://blog.csdn.net/CHENC0518/article/details/126796653

1.定义好html结构（css样式就不贴了）

<div class="uploadvideo">

<!-- element选择视频文件组件 -->

<el-upload

class="upload-demo"

drag

multiple

action="http://127.0.0.1/api/uploadvideo"

ref="uploadvideo"

:data="uploadForm"

name="visionvideofile"

:headers="headers"

:on-preview="handlePictureCardPreview"

:on-remove="handleRemove"

:on-success="uploadVideoSuccess"

:on-error="uploadVideoError"

:on-change="changelist"

:limit="1"

:on-exceed="exccedlimit"

:auto-upload="false"

accept="video/*"

>

<i class="el-icon-upload"></i>

<div class="el-upload__text">

将文件拖到此处，或<em>点击上传</em>

</div>

<div class="el-upload__tip" slot="tip">请上传MP4格式的视频素材</div>

</el-upload>

//预览视频

<video

:src="video"

class="videoshow"

id="upvideo"

autoplay

loop

muted

controls

></video>

<canvas id="mycanvas" style="display: none"></canvas>

</div>

//截图按钮

<button @click="jietu">截图</button>

//截图之后的图片

<img v-if="jieimgurl" :src="jieimgurl" alt="" />

2.需要为视频和图片绑定资源：data

video: "",//视频地址

jieimgurl: "",//截图地址

3.现在需要获取到上传视频的本地地址，通过element只需要获取file文件即可

//选择视频，数据改变函数（element内部函数）

changelist (file, fileList) {

const URL = window.URL || window.webkitURL //window.URL||window.webkitURL是浏览器兼容性写法

console.log('file', URL.createObjectURL(file.raw))

this.video = URL.createObjectURL(file.raw)//此处可以得到视频本地地址

this.videolist = fileList.length//此处和我自己代码有关，可以忽略

console.log(this.videolist)

},

4.此时预览视频已经显示视频了，现在需要为截图按钮绑定事件（如果需要自动截取视频，可以将按钮事件的操作全部放在changelist函数之中。）

jietu () {

console.log("截图")

console.log(this.video)

this.findvideocover(this.video, { url: '' })//调用截图函数

},

//截取视频第一帧作为播放前默认图片

findvideocover (url, file) {

const video = document.getElementById("upvideo") // 获取视频对象

// const video = document.createElement("video") // 也可以自己创建video

video.src = url // url地址 url跟 视频流是一样的

var canvas = document.getElementById("mycanvas") // 获取 canvas 对象

const ctx = canvas.getContext("2d") // 绘制2d

video.crossOrigin = "anonymous" // 解决跨域问题，也就是提示污染资源无法转换视频

video.currentTime = 1 // 第一帧

video.oncanplay = () => {

canvas.width = video.clientWidth // 获取视频宽度

canvas.height = video.clientHeight //获取视频高度

// 利用canvas对象方法绘图

ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight)

// 转换成base64形式

this.jieimgurl = canvas.toDataURL("image/png") // 截取后的视频封面

file.url = this.jieimgurl

console.log(this.jieimgurl)

}

},

5.此时就可以获取到截取图片地址，将其上传到后端即可。