el-upload上传视频获取视频封面，并转为base64格式

模板代码：

 <el-upload
   v-loading="officeVideoLoading "
   accept=".mp4, .webm"
   action="#"
   :auto-upload="false"
   :on-change="onChangeVideo"
   :show-file-list="false"
 >
   <div class="avatar-uploader-imgBox">
      <img
        v-if="officeVideoCover"
        class="avatar"
        :src="officeVideoCover"
      />
      <div v-else>
        <i class="el-icon-upload2"></i>
        <div>点击选择视频文件</div>
        <div slot="tip" style="color: red">
          * 只能上传mp4文件，且不超过50M
        </div>
      </div>
   </div>
 </el-upload>

脚本代码

async onChangeVideo(file) {
   this.officeVideoLoading = true
   const suffix = file.name.split('.').pop().toLowerCase()//获取文件后缀名
   const isJPG = suffix === 'webm' || suffix === 'mp4'
   const isLt2M = file.size / 1024 / 1024 < 50 //视频文件小于50M
   if (isJPG && isLt2M) {
     const frame = await this.captureFrame(file, 1) //第1秒的视频画面
     this.createPreview(frame)
     // 获取视频的base64
     this.getBase64(file).then((res) => {
       this.officeVideo = res
       this.officeVideoLoading = false
     })
   } else {
     this.officeVideoLoading = false
   }
 },

 /**
  * 捕获视频帧
  * @param {File} videoFile - 要捕获的视频文件
  * @param {number} time - 视频中的时间点，默认为0
  * @return {Promise} 返回一个解析为包含blob和url的帧对象的Promise
  */
 captureFrame(videoFile, time = 0) {
   return new Promise((resolve) => {
     const video = document.createElement('video')
     video.currentTime = time
     video.muted = true // 静音
     video.autoplay = true // 自动播放
     // 注册事件
     video.oncanplay = async () => {
       const frame = await this.drawVideo(video)
       resolve(frame)
     }
     video.src = URL.createObjectURL(videoFile.raw) // 获取blob地址
   })
 },

 /**
  * 从视频中绘制帧
  * @param {HTMLVideoElement} video - 视频元素
  * @return {Promise} 返回一个解析为包含blob和url的帧对象的Promise
  */
 drawVideo(video) {
   return new Promise((resolve) => {
     const cvs = document.createElement('canvas')
     const ctx = cvs.getContext('2d')
     ctx.drawImage(video, 0, 0, cvs.width, cvs.height)
     // 转blob
     cvs.toBlob((blob) => {
       resolve({
         blob,
         url: URL.createObjectURL(blob),
       })
     })
   })
 },

 /**
  * 创建预览图
  * @param {Object} frame - 包含blob和url的帧对象
  */
 createPreview(frame) {
   /**
    * 将Blob对象转换为Base64字符串
    * @param {Blob} blob - 要转换的Blob对象
    * @return {Promise} 返回一个解析为Base64字符串的Promise对象
    */
   function blobToBase64(blob) {
     return new Promise((resolve, reject) => {
       const reader = new FileReader()
       reader.readAsDataURL(blob)
       reader.onloadend = () => {
         resolve(reader.result)
       }
       reader.onerror = (error) => {
         reject(error)
       }
     })
   }
   blobToBase64(frame.blob).then((res) => {
     this.officeVideoCover = res//保存缩略图（base64）
   })
   // 创建img元素并设置src为帧的url，然后将其添加到body中
   // const img = document.createElement('img')
   // img.src = frame.url
   // document.body.appendChild(img)
 },

 /**
  * 将文件转换为Base64编码格式
  * @param {Object} file - 待转换的文件对象，包含原始文件信息
  * @returns {Promise} 返回一个Promise对象，该对象在文件转换成功时解析为Base64字符串，在转换失败时拒绝为错误信息
  */
 getBase64(file) {
   return new Promise((resolve, reject) => {
     // 创建一个FileReader对象，用于读取文件内容
     let reader = new FileReader()
     // 初始化文件结果变量，用于存储转换后的Base64字符串
     let fileResult = ''
     // 开始读取文件，使用DataURL格式
     reader.readAsDataURL(file.raw)
     // 监听文件读取成功事件
     reader.onload = function () {
       // 当文件读取成功时，将结果存储到fileResult变量中
       fileResult = reader.result
     }
     // 监听文件读取错误事件
     reader.onerror = function (error) {
       // 当文件读取失败时，拒绝Promise并传递错误信息
       reject(error)
     }
     // 监听文件读取结束事件
     reader.onloadend = function () {
       // 当文件读取结束时，解析Promise并返回结果
       resolve(fileResult)
     }
   })
 },