基于vue3+el-upload 获取视频第一帧截图并上传服务器

//视频上传成功

const handleVideoSuccess: UploadProps['onSuccess'] = ( response,uploadFile) => {

    if (response.status == '500005') {

      detailInfo.video_url = response.result.path

      getVideoCover(response.result)

    }

  }

 

//获取视频第一帧

  function getVideoCover() {

    const video = document.createElement("video");

    video.src = imgUrl+ detailInfo.video_url  //  视频播放地址，imgUrl-域名

    const canvas = document.createElement('canvas')

    canvas.width = 320

    canvas.height = 320

    const ctx:any = canvas.getContext('2d');

    video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频

    video.currentTime = 1 // 第一帧

    video.oncanplay = () => {  //视频准备播放

      ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

      const oGrayImg = canvas.toDataURL("image/png");  //获取base64格式的图片

      const fileBolb = convertBase64UrlToBlob(oGrayImg) //转换为二进制

      const data = new FormData();

      data.append('picture_name',fileBolb,'video.png')  //第一个参数为接口参数名

 

      UpLoadApi(data).then((res: any) => {  //已包装好的后台接口

        detailInfo.picture_cover = res.result.path

      })

      video.remove();

      canvas.remove();

    }

  }

 

//base64转换为二进制流文件

  function convertBase64UrlToBlob(urlData:any){

    var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],

        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

    while(n--){

        u8arr[n] = bstr.charCodeAt(n);

    }

    return new Blob([u8arr], {type:mime});

}

 

//备注：后台接口  index.ts文件

import request from '@/utils/request';

export function UpLoadApi(data:any) {

  return request({

      url: '/common/uploadPic',

      method: 'post',

      headers: { "Content-Type": "multipart/form-data" },

      data: data

  })

}