el-upload上传视频获取视频宽高、时长信息(多文件、单文件)

2023-10-31

<el-upload
    :on-success="handleSuccess"
></el-upload>
async handleSuccess(res, file) {
    let videoInfo = "";
    // 防止触发两次
    if (file.status !== "success") return;
    if (file.raw.type === "video/mp4") {
      videoInfo = await this.getFileDuration(file.raw);
    } else {
      videoInfo = "";
    }
    console.log('时长', videoInfo)
},
// 获取视频时长
    getFileDuration(content) {
      return new Promise((resolve) => {
        const videoElement = document.createElement("video");
        videoElement.src = URL.createObjectURL(content);
        videoElement.addEventListener("loadedmetadata", function () {
          resolve(videoElement.duration);
        });
      });
    },

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

el-upload上传视频获取视频宽高、时长信息(多文件、单文件) 的相关文章

随机推荐

  • 图解使用mock.js获取四位数验证码

    Mock js是用来模拟产生一些虚拟的数据 可以让前端在后端接口还没有开发出来时独立开发 我们可以使用真实的url mockjs可以拦截ajax请求 返回设定好的数据 一 安装 npm install mockjs D 二 全局引入mock
  • SpringBoot 启动时自动执行代码的几种方式

    一 java自身的启动时加载方式 static代码块 static静态代码块 在类加载的时候即自动执行 构造方法 在对象初始化时执行 执行顺序在static静态代码块之后 二 Spring启动时加载方式 PostConstruct注解 Po
  • C语言初步总结

    内容比较多 大家可以复制做一个文档 然后用得时候直接搜索就好了 非常方便 不用网络也可以使用 第二周的学习总结 1 对C语言的介绍与初步认识 C语言的产生与发展 FORTRAN 1957年 ALGOL 60 1960年 传统C或K R C
  • RS485在切换收发状态的时候收到0x00

    介绍一下测试背景 我使用单片机的TTL232 通过MAX485芯片转成RS485协议 但是遇到一个问题 MAX485芯片在从发送状态切换到接收状态的时候会收到一个0x00 很显然这是一个 假 数据 并不是真实接收到的数据 这个0x00着实有
  • C++中namespace detail或namespace internal的使用

    在很多开源代码中偶尔会使用名字为 detail 或 internal 的命名空间 如OpenCV的modules目录中 有些文件中使用了namespace detail 有些文件中使用了namespace internal 名为detail
  • Ceph 存储池命令 以及 数据压缩

    文章目录 一 存储池操作 1 1 常用命令 1 2 删除存储池 1 3 存储池配额 1 4 存储池可用参数 二 存储池快照 2 1 创建快照 2 2 验证快照 2 3 回滚快照 2 4 删除快照 三 数据压缩 3 1 启用压缩并指定压缩算法
  • Oracle ——删除表中重复记录

    为了方便 假设表名为Tbl 表中有三列col1 col2 col3 其中col1 col2是主键 并且 col1 col2上加了索引重复数据删除 1 通过创建临时表 把数据先导入到一个临时表中 然后删除原表的数据 再把数据导回原表 SQL语
  • 【PBR系列三】BRDF方程及渲染方程

    本文核心知识主要参照 现代计算机图形学入门 闫令琪课程课件PPT 后续光线追踪系列知识也源于此处 一 BRDF方程 通过上一部分所有辐射度量学各种概念的定义之后 我们可以从这样一个角度理解光线的反射 如下图所示 一个点 微分面积元 在接受到
  • 怎样安装NPM离线包

    因为一些 你懂的 原因 工作环境无法直接使用npm install联网安装npm包 稍微花了点时间研究了一下 Mark下来 有机会看源码再补充 最佳方案 别浪费时间了 最好还是在网络环境下把所需的包全部安装好 再想办法搬回来 尽管可以一个一
  • VMware Workstation 在此主机上不支持嵌套虚拟化。报错一秒解决

    VMware Workstation 在此主机上不支持嵌套虚拟化 这是由于VMware与Windows11自带的Hyper V冲突所导致的 简单的解决方法是 将虚拟机设置中的CPU虚拟化取消勾选 如图所示
  • Ubuntu 安装Google浏览器

    Ubuntu自带的浏览器是火狐浏览器 使用的时候多多少少有些不方便 这里安装Googel浏览器 下载 可以到 Ubuntu chrome去下载安装包 安装 首先到下载的根目录 cd Downloads sudo dpkg i google
  • Mybatis1.2 查询所有数据

    1 2 查询所有数据 1 2 1 编写接口方法 1 2 2 编写SQL语句 1 2 3 编写测试方法 1 2 4 起别名解决上述问题 1 2 5 使用resultMap解决上述问题 1 2 6 小结 如上图所示就页面上展示的数据 而这些数据
  • http 请求头大小写的问题

    如果是默认消息头名称 消息头格式已经固定 即便输入的大小写有误 也会给你翻译成默认的写法 如果自己定义的 会自动给你翻译成小写 所以传参数的名称都用小写字母即可 否则可能取不到值 比如encryptedString会取不到值 使用encry
  • 【华为OD机试真题】最短木板长度(python)100%通过率 超详细代码注释 代码解读

    华为OD机试真题 2022 2023 真题目录 点这里 华为OD机试真题 信号发射和接收 试读 点这里 华为OD机试真题 租车骑绿道 试读 点这里 最短木板长度 时间限制 1s空间限制 256MB限定语言 不限 题目描述 小明有 n 块木板
  • 在windows下C++使用Native wifi API获取SSID和连接信息

    在linux下获取当前连接的信息很是轻松的 但是在windows下相对比较复杂 虽然可以考虑使用cmd命令获取网卡的信息并分析出当前连接的SSID 但是对于网络环境比较复杂的情况下其实我们同样可以使用Native wifi API获取目前的
  • linphone-android for mac编译过程记录

    本文记录linphone andoroid在mac上的编译过程 在这里做下记录 希望对大家有所帮助 如有疑问发评论即可 环境搭建 代码下载 git clone git git linphone org linphone android gi
  • 阿里云学生服务器配置及免费学生机领取攻略

    阿里云学生服务器优惠活动从云翼计划升级为开发者成长计划 现在学生服务器活动为高校学生在家实践计划 学生用户群可以免费领取阿里云学生服务器 如果购买特价服务器只需要新用户即可 不需要学生认证即可享受优惠价 阿里云百科来详细说下阿里云学生服务器
  • 二、从C到C++(二) 引用、引用常见用途、指针和引用区别、const引用

    一 引用类型 引用 像一个自动能被编译器逆向引用的常量型指针 它通常用于函数的参数表中和函数的返回值 但也可以独立使用 比如 int x int r x 使用引用的一些规则 当引用被创建时 它必须被初始化 指针则可以在任何时候被初始化 一旦
  • 对主流编程语言的认识

    主流编程语言的认识 语言 用途 C 操作系统 嵌入式开发 C 游戏 图形图像 桌面软件 服务器 C 桌面软件 服务器 JAVA JAVA SE 桌面软件 Android JAVA EE 企业级应用 web开发 服务器 JAVA ME 手机应
  • el-upload上传视频获取视频宽高、时长信息(多文件、单文件)