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

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.mfbz.cn/a/573642.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何开启kali的ssh远程连接

1.打开配置文件 vim /etc/ssh/sshd_config 将第13行和32改为如下,保存退出 重启服务 sudo systemctl restart ssh.service 使用远程工具(如xshell)即可连接 如果无法连接,需要先生成两个密钥:ssh-keygen -t dsa -f…

【14-Ⅱ】Head First Java 学习笔记

HeadFirst Java 本人有C语言基础,通过阅读Java廖雪峰网站,简单速成了java,但对其中一些入门概念有所疏漏,阅读本书以弥补。 第一章 Java入门 第二章 面向对象 第三章 变量 第四章 方法操作实例变量 第五章 程序实战 第六章 Java…

每周一算法:最短路计数

题目描述 给出一个 N N N个顶点 M M M 条边的无向无权图,顶点编号为 1 1 1 到 N N N。 问从顶点 1 1 1 开始,到其他每个点的最短路有几条。 输入格式 第一行包含 2 2 2 个正整数 N , M N,M N,M,为图的顶点数与边数。 接下来 M M …

Linux基础命令[25]-groupadd

文章目录 1. groupadd 命令说明2. groupadd 命令语法3. groupadd 命令示例3.1 不加参数3.2 -f(强制创建)3.3 -g(指定组ID)3.4 -r(系统用户组) 4. 总结 1. groupadd 命令说明 groupadd:用于创建…

C语言入门课程学习记录4

C语言入门课程学习记录4 第18课 - signed 与 unsigned第19课 - 再论数据类型第20课 - 经典问题剖析第21课 - 程序中的辅助语句(上)第22课 - 程序中的辅助语句(下) 本文学习自狄泰软件学院 唐佐林老师的 C语言入门课程,…

【C++】:拷贝构造函数和赋值运算符重载

目录 一,拷贝构造函数1. 什么是拷贝构造函数2. 拷贝构造函数的特性3. 实践总结 二,赋值运算符重载2.1 运算符重载2.2 赋值运算符重载 一,拷贝构造函数 1. 什么是拷贝构造函数 拷贝构造函数是特殊的构造函数。是用一个已经存在的对象&#x…

JVM虚拟机监控及性能调优实战

目录 jvisualvm介绍 1. jvisualvm是JDK自带的可以远程监控内存,跟踪垃圾回收,执行时内存,CPU/线程分析,生成堆快照等的工具。 2. jvisualvm是从JDK1.6开始被继承到JDK中的。jvisualvm使用 jvisualvm监控远程服务器 开启远程监控…

软考高级 | 系统架构设计师笔记(一)

一. 系统规划 1.1 项目的提出与选择 该步骤生成” 产品/项目建议书”. 1.2 可行性研究与效益分析 包括经济可行性/技术可行性/法律可行性/执行可行性/方案选择 5 个部分. 该步骤生 成”可行性研究报告”. 1.3 方案的制订和改进 包括确定软件架构/确定关键性要素?/确定计算…

java Web-Spring AOP

AOP的概念 AOP:面向切面编程,面向方法编程。简单理解就是对特定方法的扩充的思想 例如我们要在特定方法进行方法的执行时间判断,我们假如去使用在每个方法去进行业务逻辑扩充,这样就太繁琐了,而使用AOP就可以简化操作。Spring A…

mybatis中<if>条件判断带数字的字符串失效问题

文章目录 一、项目背景二、真实错误原因说明三、解决方案3.1针对纯数字的字符串值场景3.2针对单个字符的字符串值场景 四、参考文献 一、项目背景 MySQL数据库使用Mybatis查询拼接select语句中进行<if>条件拼接的时候&#xff0c;发现带数字的或者带单个字母的字符串失效…

vue基础教程(7)——构建项目级首页

同学们可以私信我加入学习群&#xff01; 正文开始 前言一、页面结构二、侧边栏三、主体部分总结 前言 前面我们学习了vue的路由和登录页搭建&#xff0c;本文将和大家共同学习首页的搭建。 首页示例如图&#xff1a; 很多项目经验比较少的同学&#xff0c;一般都是对某些语…

架构师系列-消息中间件(八)- RocketMQ 进阶(二)-生产端消息保障

5. RocketMQ消息保障 下面我们详细说下如何保障消息不丢失以及消息幂等性问题 5.1 生产端保障 生产端保障需要从一下几个方面来保障 使用可靠的消息发送方式注意生产端重试生产禁止自动创建topic 5.1.1 消息发送保障 5.1.1.1 同步发送 发送者向MQ执行发送消息API时&#xff0…

springBoot集成flowable

前言 Flowable可以十分灵活地加入你的应用/服务/构架。可以将JAR形式发布的Flowable库加入应用或服务&#xff0c;来嵌入引擎。 以JAR形式发布使Flowable可以轻易加入任何Java环境&#xff1a;Java SE&#xff1b;Tomcat、Jetty或Spring之类的servlet容器&#xff1b; JBoss…

网工内推 | 上市公司网络运维,大专可投,NA/NP认证优先

01 珠海世纪鼎利科技股份有限公司 招聘岗位&#xff1a;网络运维工程师 职责描述&#xff1a; 1、负责服务器安装、维护和设备管理&#xff1b; 2、负责应用系统的部署&#xff0c;升级&#xff0c;维护&#xff1b; 3、分析网络数据&#xff0c;排查网络故障及事务的应急响应…

百度网盘svip白嫖永久手机2024最新教程

百度网盘&#xff08;原名百度云&#xff09;是百度推出的一项云存储服务&#xff0c;已覆盖主流PC和手机操作系统&#xff0c;包含Web版、Windows版、Mac版、Android版、iPhone版和Windows Phone版。用户将可以轻松将自己的文件上传到网盘上&#xff0c;并可跨终端随时随地查看…

【C语言】红黑树详解以及C语言模拟

一、红黑树的性质二、红黑树的旋转操作三、红黑树的插入操作四、红黑树的删除操作五、红黑树的应用六、C语言模拟红黑树七、总结 红黑树是一种自平衡二叉查找树&#xff0c;它能够保持树的平衡&#xff0c;从而确保查找、插入和删除的最坏情况时间复杂度为O( l o g n log_n log…

软考-系统集成项目管理中级--项目人力资源管理(输入输出很重要!!!本章可能包含案例题)

本章历年考题分值统计 本章重点常考知识点汇总清单(学握部分可直接理解记忆) 10、项目沟通管理计划一般应包括以下内容:(掌握)12上59&#xff0c;10下59&#xff0c;13上53&#xff0c;13上57,14下58&#xff0c;15下58&#xff0c;16上59 考题 (1)干系人的沟通需求。 (2)针对沟…

爬虫抓取网站数据

Fiddler 配置fiddler工具结合浏览器插件 配置fiddler Tools--Options 抓包技巧 谷歌浏览器开启无痕浏览,使用SwitchyOmega配置好代理端口 Ctrl x 清理所有请求记录,可以删除指定不需要日志方便观察 设置按请求顺序 观察cookie,观察请求hesder cookie和row返回结果 Swit…

C++/QT + Mysql + Tcp 企业协作管理系统

目录 一、项目介绍 二、项目展示 三、源码获取 一、项目介绍 1、项目概要&#xff1a;C/S架构、数据库Mysql、C、QT&#xff1b;支持实时通信、局域网内通信&#xff0c;可多个客户端同时登录&#xff1b; 2、&#xff08;Server&#xff09;管理端&#xff1a;用户管理、…