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

标签：el canvas const 视频 upload video vue3 data any

//视频上传成功

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   }) }  

标签：el,canvas,const,视频,upload,video,vue3,data,any
From： https://www.cnblogs.com/daniller/p/17171179.html