uniapp获取video的第一帧转化为图片

<template>
    <view class="content">
        <image v-if="demo != ''" class="logo" :src="demo"></image>
        <!-- <image class="logo" :src="url+videoImg"></image> -->
        <video :src="url"></video>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                url: 'https://a1.easemob.com/1175220727113829/tikangbao2022/chatfiles/f2274ac0-3958-11ed-8939-9d38195bdc46',
                videoImg:"?vframe/jpg/offset/0",
                // url:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
                // videoImg:"?x-oss-process=video/snapshot,t_1,m_fast",
                demo:'',
            }
        },
        onLoad() {
            this.getVideoPoster(this.url)
        },
        methods: {
            
              getVideoPoster(url) {
                  const that = this;
                  let video = document.createElement('video')
                  video.setAttribute('crossOrigin', 'anonymous') // 处理跨域，H5需后台支持，请求的视频资源响应投标需有Access-Control-Allow-Origin
                  video.setAttribute('src', url)
                  video.setAttribute('width', 400)
                  video.setAttribute('height', 400)
                  video.setAttribute('preload', 'auto')
                  // uni.chooseVideo选择视频，当选用手机拍摄的视频时，地址是相对地址，如 _doc/uniapp_temp_1650594368317/camera/1650594390147.mp4
                  // 可播放，但是loadeddata一直不执行，会触发error事件，视频加载失败
                  // 应先转换成本地地址
                  video.addEventListener('loadeddata', function () {
                    console.log('视频第一帧加载完')
                    let canvas = document.createElement('canvas')
                    let width = video.width // canvas的尺寸和图片一样
                    let height = video.height
                    canvas.width = width
                    canvas.height = height
                    canvas.getContext('2d').drawImage(video, 0, 0, width, height) // 绘制canvas
                    const dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
                    that.demo = dataURL;
                    console.log('getVideoPoster-dataURL', dataURL.slice(0, 16)) 
                                this.dataURLtoFile (dataURL,'video.png');
                  })
                  
                  video.addEventListener('error', err => {
                    console.log('视频加载失败', err)         
                  })
              },
//上传文件
 dataURLtoFile = (file,filename)=>{
    const arr = file.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }

    const newfile = new File([u8arr], filename, {type: mime});

 
 }

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }

    .logo {
        height: 500rpx;
        width: 500rpx;
        border: 3px solid red;
    }


</style>