vue上传视频获取视频第一帧

<div class="video" v-show="videoUrl">
              <video id="upvideo" v-show="poster == ''" :src="videoUrl">您的浏览器不支持视频播放</video>
              <img :src="poster" alt="" /> // 获取第一帧
            </div>
<canvas id="canvassrc" style="display: none"></canvas> // 注意要用到画布

 afterRead(file, url) {
      this.fileData = new FormData()
      this.fileData.append('file', file.file)
      wxVideoUpload(this.fileData).then((res) => {
        if (res.code == 200) {
           var canva = document.getElementById('canvassrc')
           var video = document.getElementById('upvideo')
           this.videoUrl = file.content
           video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
          video.currentTime = 1 // 第一帧
          video.oncanplay = () => {
             canva.width = video.clientWidth // 获取视频宽度
             canva.height = video.clientHeight //获取视频高度
             // 利用canvas对象方法绘图
             const ctx = canva.getContext('2d') // 绘制2d
             ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
             // 转换成base64形式
             this.imgsrc = canva.toDataURL('image/png') // 截取后的视频封面
             this.poster = this.imgsrc
          }
        }
      })
    },