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;

      }
    },