基于element-ui的upload 实现视频文件的第一帧显示

 htlm

    <el-upload
      
      :action="uploadFileUrl"
      class="hide_box"
      :on-preview="handlePreview"
      :before-upload="handleBeforeUpload"
      :disabled="true"
      multiple
      :file-list="fileList"
      :data="params"
      :on-success="addFile"
      :on-error="miss"
      :on-change="fileChange"
      list-type="picture-card"
      v-else
    >
    </el-upload>

触发上传成功后的事件

    addFile(response, file, fileList) {
      let _self = this;
            _self.fileList = fileList;
            if (file.status != 'success') {
                _self.$message({
                    message: '附件上传失败',
                    type: 'error'
                })
                _self.fileList.splice(_self.fileList.indexOf(file, 1))
            } else {
                if (this.VideoTypes.indexOf(response.fileExtension) >= 0) {   // 为我本地自定义判断是否是视频方法，可自己修改
                    //视频附件，获取第一帧画面作为 封面展示
                    _self.getVideoCover(file);
                }
            }
      this.$message({
        showClose: true,
        message: '文件上传成功',
        type: 'success'
      })
      this.fileData.url = response.url
      console.log(response)
      console.log(`上传的文件id为${response.id},下载地址为为${response.url}, 文件后缀为${response.fileExtension}`)
      file.fileExtension= response.fileExtension
    },

 获取第一帧的图片并且加上水印

        /**
         * 获取视频第一帧作为回显封面
         * @param file 至少应包含url信息，即 {url: ""}
         */
         getVideoCover(file) {
          console.log("回显封面");
            let _self = this;
            // _self.$set(file, 'videoUrl', _self.$utils.deepClone(file.url)); //备份视频源路径，用于后续预览展示
            
            const video = document.createElement("video") // 也可以自己创建video
            video.src = file.url // url地址 url跟 视频流是一样的
            // file.url = videoDefCover;   //设置默认封面，videoDefCover 为预制的默认封面，不需要可去除或替换成自己的
            let canvas = document.createElement('canvas') // 获取 canvas 对象
            const ctx = canvas.getContext('2d'); // 绘制2d
            video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
            video.currentTime = 1 // 第一帧
            const watermarkImg = new Image();
            watermarkImg.src = "/image/video.jpg"; //水印
            watermarkImg.onload = () => {
            video.oncanplay = () => {
                console.log(video.clientWidth, video.clientHeight);
                canvas.width = video.clientWidth ? video.clientWidth : 320; // 获取视频宽度
                canvas.height = video.clientHeight ? video.clientHeight : 320; //获取视频高度
                // 利用canvas对象方法绘图
                ctx.drawImage(video, 0, 0, canvas.width,canvas.height)

                // 计算最大水印尺寸，不超过视频帧的一半
              const maxWatermarkSize = Math.min(canvas.width, canvas.height) / 2;
              const watermarkWidth = watermarkImg.naturalWidth * (maxWatermarkSize / watermarkImg.naturalHeight);
              const watermarkHeight = watermarkImg.naturalHeight * (maxWatermarkSize / watermarkImg.naturalWidth);

              // 绘制半透明居中水印
              ctx.globalAlpha = 0.9;
              const x = (canvas.width - watermarkWidth) / 2;
              const y = (canvas.height - watermarkHeight) / 2;
              ctx.drawImage(watermarkImg, 0, 0, watermarkImg.naturalWidth, watermarkImg.naturalHeight, x, y, watermarkWidth, watermarkHeight);

                // 转换成base64形式
                let _videoFirstimgsrc = canvas.toDataURL ("image/png"); // 截取后的视频封面
                _self.$set(file, 'url', _videoFirstimgsrc);   //重置文件的url为当前截取的封面，用于 el-upload展示
                video.remove();
                canvas.remove();
            }
          }
        },