上传本地视频前，获取视频时长，并以视频第一秒作为封面

本文介绍的是，在本地添加了需要上传的视频文件后，先获取到视频的可播放时长，并且以视频的第一秒画面作为封面图片的实现方法，之后再调用上传接口，将相关数据进行上传。【网上搜到的大部分都是先上传文件，再使用接口返回的视频地址获取封面，不符合我的需求，所以作此文进行整理】
可以先使用上传组件获取到上传的视频文件对象，如elementUI或Antd的Upload组件。
此处以elementUI的el-upload组件举例，在beforeUpload方法中，先获取到file对象，然后进行以下代码操作。

const canvas = document.getElementById("mycanvas"); // 获取 canvas 对象
const ctx = canvas.getContext("2d"); // 绘制2d
let video = document.createElement("video");
video.src = URL.createObjectURL(file);
video.addEventListener("loadedmetadata", (_event) => {
  // 获取视频时长
  const duration = parseInt(video.duration);
  // 获取视频内容宽高比
  const scale = video.videoWidth / video.videoHeight;
});
video.currentTime = 1; // 设置视频播放进度为第一秒
video.oncanplay = () => {
  // 按视频内容原比例设置canvas宽度、高度
  // 此处198为按需求设置的视频展示区的高度
  canvas.width = 198 * scale;
  canvas.height = 198;
  // 利用canvas对象方法绘图
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  // 转换成base64形式
  const imgSrc = canvas.toDataURL("image/png"); // 截取后的视频封面
};