el-upload组件如何上传blob格式的url地址视频

news2024/9/27 23:31:09

el-upload组件如何上传blob格式的url地址视频

  • 一、存在问题
  • 二、直接上代码

需求:想把视频地址url:“blob:http://localhost:8083/65bd3c0f-52ec-4844-b85e-06fdb5095b7b”,通过el-upload组件上传

el-upload是Element UI中用于文件上传的组件,通常用于上传本地文件。如果需要上传url地址而不是本地文件也是可以的,需要自己封装一下

一、存在问题

正常el-upload上传本地文件参数是
在这里插入图片描述
如果把 Blob 转换为 File就可以上传了

二、直接上代码

        //点击保存上传视频
        saveRecording() {
           //创建了 Blob 对象并将其添加到 FormData 中
            const blob = new Blob([this.videoUrl], { type: 'text/plain' });
            const formData = new FormData();
            formData.append('file', blob);
            formData.append('fileType', 5);//加一个额外参数
            const headers = {
                token: this.$store.state.token,
            };
            console.log(headers, 'header');
            fetch(process.env.VUE_APP_WEB_API + `/上传接口`, {
                method: 'POST',
                headers,
                body: formData,
            })
                .then(res => {
                    return res.json(); // Assuming response is JSON format
                })
                .then(({ data }) => {
                    if (data.url) {
                        this.$message({
                            type: 'success',
                            message: '添加成功!',

                            showClose: true,
                            offset: 80,
                        });
                        this.videoData = data;
                        this.videoName = data.fileName;

                        this.sizeTime = `文件大小:${
                            this.returnSize(this.videoData.fileSize) || 0
                        }`;
                        // var elevideo = document.getElementById("videoPlay");
                        // elevideo.addEventListener("loadedmetadata", function () {
                        //   //加载数据
                        // const duration = elevideo.duration;
                        // console.log(duration,'duration');
                        //   //视频的总长度
                        //   const minutes = Math.floor(duration / 60);
                        //   const seconds = Math.floor(duration % 60);
                        //   this.sizeTime = `文件大小:${
                        //     this.returnSize(this.videoData.fileSize) || 0
                        //   } ;录屏时长:${minutes} 分钟 ${seconds} 秒`;
                        // });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        },

效果如下
在这里插入图片描述

结束了,就是这么简单~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1615228.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

霸气归来,AKG N9 Hybrid头戴式降噪耳机震撼发布!手边的“大耳”瞬间不香了?

自1947年Rudolf Grike博士和Ernst Pless先生在“音乐之都”维也纳创立AKG以来,品牌已经走过77载辉煌历程,其产品被广泛应用于全球各大巡回演出和录音棚中,为全球音乐爱好者和专业人士提供了无数优质的声音体验。 近日,AKG再度以王…

ASP.NET Core 标识(Identity)框架系列(四):闲聊 JWT 的缺点,和一些解决思路

前言 前面的几篇文章讲了很多 JWT 的优点,但作为技术人员都知道,没有一种技术是万能的 “银弹”,所谓有矛就有盾,相比 Session、Cookie 等传统的身份验证方式,JWT 在拥有很多优点的同时,也有着不可忽视的缺…

【矩阵快速幂】太震惊了!直接把斐波那契从6s优化到了0毫秒....

今天我们来学习一个新的专题,「快速幂」技巧。 斐波那契数列 相信大家都不陌生,小学的找规律题目中就经常见到它的身影。 递推表达式为: 根据该表达式,可以很轻松的写出递归版本的代码: public static int f(int n…

【C语言进阶】指针例题大杂烩,阁下是高手还是菜鸟?

前言 首先说明,本文不适合新手,如果你刚刚接触指针,可以看看前五点,这是我认为指针中比较重要的细节,例题部分酌情尝试。 如果你自认为指针学的不错,胸有成竹,请尝试最后的例题,如…

如何用网页绘制一个黑莓9900的键盘效果图

如何用网页绘制一个黑莓9900的键盘效果图 入了几个黑莓蓝牙键盘,出于喜好,想做一个跟实体键盘一模一样的网页界面。 最终的实现效果是这样的: 在线查看:http://kylebing.cn/tools/bb-keyboard 点击上面四个按键显示不同模型界面…

【C++】适配器· 优先级队列 仿函数 反向迭代器

目录 适配器:适配器的应用:1. 优先级队列:仿函数:更深入的了解仿函数:一个关于不容易被注意的知识点: 2. 反向迭代器:(list为例) 适配器: 我们先来谈来一下容…

CentOS 7安装、卸载MySQL数据库(一)

说明:本文介绍如何在CentOS 7操作系统下使用yum方式安装MySQL数据库,及卸载; 安装 Step1:卸载mariadb 敲下面的命令,查看系统mariadb软件包 rpm -qa|grep mariadb跳出mariadb软件包信息后,敲下面的命令…

OpenStack云计算(十)——OpenStack虚拟机实例管理,增加一个计算节点并进行实例冷迁移,增加一个计算节点的步骤,实例冷迁移的操作方法

项目实训一 本实训任务对实验环境要求较高,而且过程比较复杂,涉及的步骤非常多,有一定难度,可根据需要选做。可以考虑改为直接观看相关的微课视频 【实训题目】 增加一个计算节点并进行实例冷迁移 【实训目的】 熟悉增加一个…

力扣110. 平衡二叉树

思路:与二叉树最大高度类似,但是这里需要返回 -1 的高度来标识不是平衡二叉树,判断左右子树的高度相差大于1则不平衡,否则就是平衡。 class Solution {public boolean isBalanced(TreeNode root) {int ans func(root);if(ans >…

向Linux内核添加新功能的静态加载与动态加载

目录 向Linux内核添加新功能的静态加载与动态加载 开发环境&#xff1a; 一、静态加载法 1、新功能源码与Linux内核源码在同一个目录结构下 2、给新功能代码配置Kconfig 3、给新功能代码改写Makefile 4、使用make menuconfig 在配置界面里将新功能对应的那项选择成<*&…

AI商业智能的一些分享

本文主要讲AI商业相关的&#xff08;特别是营销相关的&#xff09;一些知识点&#xff0c;比较零散。 简单总结 AI商业智能&#xff1a; 1&#xff09;将人员经验抽象化为算法规则&#xff0c; 2)打造数据驱动的精益运营能力&#xff0c; 3)长期保持价格竞争力并将商品毛利让…

Java中的重写

package day34; ​ public class Father {String name;int age;public void 输出(){System.out.println("father");} } ​ package day34; ​ public class Son extends Father{Overridepublic void 输出() {System.out.println("son");} } ​ package d…

【LAMMPS学习】八、基础知识(3.8)计算扩散系数

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语&#xff0c;以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

Spring基础 SpringAOP

前言 我们都知道Spring中最经典的两个功能就是IOC和AOP 我们之前也谈过SpringIOC的思想 容器编程思想了 今天我们来谈谈SpringAOP的思想 首先AOP被称之为面向切面编程 实际上面向切面编程是面向对象的编程的补充和完善 重点就是对某一类问题的集中处理 前面我们写的统一异常管理…

2024接口自动化测试入门基础知识【建议收藏】

接口自动化测试是指通过编写测试脚本和使用相关工具&#xff0c;对软件系统的接口进行自动化测试的过程。 今天本文从4个方面来介绍接口自动化测试入门基础知识 一、接口自动化测试是什么&#xff1f; 二、接口自动化测试流程&#xff1f; 三、接口自动化测试核心知识点有那些…

Linux--uboot移植(二)

修改uboot以匹配开发板的方式有两种&#xff0c;一种是在NXP原厂开发板i.MX 6ULL EVK的文件上进行修改&#xff0c;另一种仿造NXP的开发板文件&#xff0c;添加自己的开发板文件。 为了能更多的了解uboot&#xff0c;我们使用代码改动较大的第二种方式进行uboot的移植。 在修…

HTML5+JavaScript实现语音合成(文字转语音)

HTML5JavaScript实现语音合成&#xff08;文字转语音&#xff09; 本文介绍用HTML5和JavaScript实现语音合成朗读&#xff08;文字转语音&#xff09;。 Web Speech API 有两个部分&#xff1a;SpeechSynthesis 语音合成&#xff08;文本到语音 TTS&#xff09;和 SpeechReco…

双周回顾#009 - 大黄和我

双周回顾#009 - 大黄和我 说一个笑话&#xff0c;被朋友催更了&#xff0c;这就有点尴尬了&#xff01;&#xff01;&#xff01; 最近一个月&#xff0c;把空闲时间都点在了“玩”上&#xff0c;看闲书、玩游戏、背包客。 部落冲突 《埃隆马斯克传》一书中&#xff0c;马斯…

ubunt18.04安装ROS避坑指南

1 前言&#xff1a; 本文是ubunt18.04下安装ros的&#xff0c;如果想使用ros2,请看我的下一篇文章,ubunt18.04安装ROS2 本来是不该写的&#xff0c;有官方文档&#xff0c;还有很多大神的分析。但里面的坑太多&#xff0c;我考虑了一下&#xff0c;还是想记录下避免下次在跳泥…

day06 51单片机-点阵led

1 点阵LED 1.1 需求描述 本案例介绍如何使用点阵LED显示一排由左上到右下的斜线。 1.2 硬件设计 1.2.1 硬件原理图 点阵内部的原理图: 点阵LED的原理也非常简单,就是LED点灯。例如,我们想要让13列(阳极端)9行(阴极端)的LED点亮,需要13为高电平,9为低电平。注意对于…