上传 并获取视频第一帧

 <el-upload
                accept="video/mp4"
                :limit="2"
                ref="videoUploadPr"
                action="https://api.vchatgood.com/api/v2/third/resource/batchUploadAndGetFileInformation"
                list-type="picture-card"
                :on-success="videoSuccessPr"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :append-to-body="true">
                <video
                  id="upvideo"
                  width="100%"
                  autoplay
                  height="500"
                  :src="dialogImageUrl"
                  controls
                ></video>
              </el-dialog>```

videoSuccessPr(res, file, fileList) {
  this.findvideocover(file.url, file, 4, res.data[0]);
  console.log(res, res.code, res.data[0].url);
  if (res.code == 200) {
    this.pathUrl = res.data[0].url;
  } else {
    this.$message.error("发布失败！");
  }
},

//截取视频第一帧作为播放前默认图片
findvideocover(url, file, type, res) {
console.log(res);
// const video = document.getElementById(“myvideo”); // 获取视频对象
const video = document.createElement(“video”); // 也可以自己创建video
video.src = url; // url地址 url跟 视频流是一样的

  // var canvas = document.getElementById('mycanvas') // 获取 canvas 对象
  var canvas = document.createElement("canvas"); // 获取 canvas 对象
  const ctx = canvas.getContext("2d"); // 绘制2d
  video.crossOrigin = "anonymous"; // 解决跨域问题，也就是提示污染资源无法转换视频
  video.currentTime = 1; // 第一帧

  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);
    // 转换成base64形式
    this.videoFirstimgsrc = canvas.toDataURL("image/png"); // 截取后的视频封面
    file.url = this.videoFirstimgsrc;
    // base64转成bolb文件
    const fileBolb = this.base64toFile(
      this.videoFirstimgsrc,
      this.getFileName(file)
    );
    console.log(fileBolb, file.url, this.videoFirstimgsrc);
    // 把首图上传生成云上地址
    this.getFirstPngUrl(fileBolb, type, res);
    video.remove();
    canvas.remove();
  };
},

base64toFile(baseUrl, filename = "file") {
  let arr = baseUrl.split(",");
  let type = arr[0].match(/:(.*?);/)[1]; // 解锁图片类型
  let bytes = atob(arr[1]); // 解码base64
  let n = bytes.length;
  let bufferArray = new Uint8Array(n);
  while (n--) {
    bufferArray[n] = bytes.charCodeAt(n);
  }
  return new File([bufferArray], filename, { type });
},

getFirstPngUrl(file, type, resd) {
  const fd = new FormData();
  fd.append("file", file);
  console.log(fd, "fd");
  // this.$post为我自己封装的axios的post方法。可直接用axios的post方法
  uploadImg(fd, {
    headers: { "Content-Type": "multipart/form-data" },
  }).then((res) => {
    this.videoFirstimgsrc = res.url;
    console.log(this.videoFirstimgsrc, res);
    // this.videoWriteFileList[0].url = res.url;
    if (res.data.code == 200) {
      this.$refs.videoUpload.clearFiles();
      this.$refs.videoUploadPr.clearFiles();
      increaseMarketAnchorResource({
        userId: getQueryString("id"),
        url: this.pathUrl,
        videoCoverPicture: res.data.data.url,
        type: type,
        ext: resd.ext,
        height: resd.height,
        size: resd.size,
        width: resd.width,
        duration: resd.duration,
      }).then((res) => {
        if (res.code == 200) {
          this.getMarketAnchorInformation();
          this.$message({
            type: "success",
            message: "修改成功",
          });
        } else {
          this.$message.error("修改失败");
        }
      });
    }
  });
},

getFileName(file) {
  const type = file.raw.type.split("/")[1];
  let name = "";
  if (type) {
    name = file.raw.name.substring(0, file.raw.name.indexOf(`.${type}`));
  }
  return `${name}.png`;
},