base64 转换为formdata 上传服务器

/*** 
    获取视频的封面图信息
  * @param url 视频地址
  * @param second 秒数
  * @param fileType file类型(file, filedata)
*/

 async getVideoBase64(url, second, fileType) {
     const video = document.getElementById('videoRef')
     let that = this
         video.setAttribute('crossOrigin', 'anonymous'); // 处理跨域
         video.src = url
         video.setAttribute('muted', 'muted'); // 静音操作,防止播放失败
         video.width = 500
         video.height = 225
         video.addEventListener('loadeddata', async () => {
            const canvas = this.$refs.canvasRef
            console.log(video.width)
            canvas.width = 500;
            canvas.height = 225;
            if (second) {
                video.currentTime = second; // 播放到当前时间的帧,才能截取到当前的画面
                    await video.play();
                    await video.pause();
                 }
                 let cxt = canvas.getContext('2d')
                     cxt.drawImage(video, 0, 0, video.width, video.height)
                 let src = canvas.toDataURL('image/jpeg') // 移除 MIME 类型前缀  
                 const base64Data = src.split(',')[1]; // 将 Base64 数据转换为 Blob 对象  
                 const byteString = atob(base64Data);
                 // 提取MIME 类型
                 const mimeString = src.split(',')[0].split(':')[1].split(';')[0];
                 const ab = new ArrayBuffer(byteString.length);
                 const ia = new Uint8Array(ab);  
                 for (let i = 0; i < byteString.length; i++) {  
                        ia[i] = byteString.charCodeAt(i);  
                    }
                  const blob = new Blob([ab], { type: mimeString });
                  //创建 FormData 对象并添加 Blob 对象  
                  const formData = new FormData();  
                  formData.append(fileType, blob, 'file.png'); 
                  // 你可以指定一个文件名  
                  let url = `https://api.lotusdata.com/xXXXXXX` //需要上传的服务器地址
                  axios.post(url, formData, {
                            headers: {
                                Authorization: this.uploadtoken,
                                "Content-Type": "multipart/form-data"
                            }}).then(res=>{
                                if (res.data.code === '0') {
                                    let url = res.data.data
                                } else {
                                    console.log('获取')
                                }
                            })
         });
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萌新芽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值