vue 上传视频和图片 并且截取视频第一帧作为播放前默认图片

 <el-upload
                :action="pathUrl+'/api/FileUpload/SaveFiles'"
                :limit="5"
                list-type="picture-card"
                :file-list="sfzzm"
                :on-preview="handlePictureCardPreview"
                :on-success="handleDownload"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
                :before-upload="beforeAvatarUpload"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>

handleDownload(response, file, fileList) {
    if (file.status) {
        var index = file.name.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
        var tv_id = file.name.substring(index); //截断"."之前的，得到后缀
        this.videoUrl = file.url;
        //如果是视频截取第一个作为图片展示出来
        if (tv_id == ".mp4") {
          //根据后缀，判断是否符合视频格式
            this.findvideocover(this.pathUrl+response.Data[0],file);
          }
          this.sfzzm.push(file);
          this.ListFileUrlDetail.Url = response.Data[0];
          this.ListFileUrlDetail.Size = file.size;
          this.ListFileUrlDetail.uid = file.uid;
        
        this.form.FileUrls.push( Object.assign({}, this.ListFileUrlDetail) );
      }
      console.log("sfzzm" + JSON.stringify(this.sfzzm));
    },
     
    ///超出数量限制
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },

　　

//截取视频第一帧作为播放前默认图片
     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.imgsrc = canvas.toDataURL ("image/png") // 截取后的视频封面
         file.url=this.imgsrc;

      }
    },