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

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.此时就可以获取到截取图片地址，将其上传到后端即可。