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上传视频获取视频宽高、时长信息(多文件、单文件) 的相关文章

  • Vue.js + Element UI:在更改时获取“event.target”

    我无法获取在事件处理程序中触发事件的 html 字段 在 javascript 中是event target 我有一个表格 附加到更改事件函数的输入元素 管理更改事件的函数 我的代码如下 var Main methods change pa
  • vuejs 模板和 asp.net 部分视图,好的做法吗?

    我在网站中使用 Vue js 并将模板添加到 html 代码中 并将 js 代码添加到单个 js 文件中 所以我不想使用 vue Vuefy Browserfy 方法 而是稍后捆绑并缩小我的 js 文件 由于我必须使用 Asp Net MV
  • Vue SPA - 如何在浏览器中呈现时隐藏 .vue 文件

    我正在开发一个用 Vue js 开发的单页应用程序 托管在 Node js 服务器上 目前它仍在开发中 但最终将暴露给外部客户 并且由于我们将处理敏感数据 我们希望避免在用户检查元素时看到 vue 文件和相对文件树结构在开发工具中 See
  • 如何居中对齐表格 - PDFMAKE

    我可以使用 PDFMAKE 创建一张居中对齐 页面 的表格吗 已定义的对齐方式 样式中的 center 和标签表内的 table width auto body text PER ODO style tableHeader text VOL
  • 过滤输入文本以仅输入数字,甚至不输入小数

    我的目标是用户只输入 0 9 之间的数字 甚至不允许输入小数 怎么做 The code
  • ES6 在defineAsyncComponent 中命名导入

    我想异步加载我的网络应用程序的一些元素 这是旧的导入 import Popover PopoverButton PopoverPanel from headlessui vue export default components Popov
  • 在 vuejs 上将 \n 替换为新行

    我正在尝试将 n 字符替换为来自端点的数据的新行 I tried p item licensedocument legal documentText replace r n r n g br p 并没有奏效 当我将replace 写入问题末
  • Cytoscape 布局 - 处理锁定节点

    我正在使用 vue cytoscape 渲染图形并浏览树状数据结构 我的目标是扩展父节点并保持它们在图中的位置 我想简单地添加新的子节点 我的方法是锁定当前节点 添加子节点并解锁节点 this cy nodes lock for let d
  • 在上传之前预览图像 VUEjs [重复]

    这个问题在这里已经有答案了 我知道这个问题已经被问过 但我不知道如何在vuejs中使用代码 我尝试了很多但没有任何结果 我还添加了我的代码 有人可以帮帮我吗 这是我的代码 谢谢 html
  • nuxt.js - 如何在服务器端为所有客户端缓存 axios 调用

    我正在使用 vue nuxt js 应用程序 我想知道是否可以为所有客户端缓存 axios webservice 调用 我必须获取一些货币参考数据 而每个客户都必须调用这些数据并没有多大意义 有人可以给我一些提示 甚至是一个例子吗 谢谢 这
  • Vue.JS 可以与 AJAX http 调用一起使用吗?

    我正在尝试从 HTML 中执行以下操作 var vm new Vue el loginContent data main message Login isLoggedIn false loginError loginButton Login
  • 每次页面重新启动时,Firebase.auth().currentUser 都会变为 null

    我正在使用 firebase 身份验证与 vue 应用程序 每次登录用户后重新启动页面时 currentUser 都会变为 null firebase auth signInWithEmailAndPassword this email t
  • Vue模板-渲染HTML特殊字符代码

    如何在我的 Vue 模板中完全渲染 HTML 特殊字符代码 例如我有这个 JSON 数据 id post91 slug null title Breakfast 038 Tea 我怎样才能转换Breakfast 038 Tea to Bre
  • 如何在 vue 模板中使用 `console.log` 或 `console.error`?

    我有一个 vue 组件
  • 如何在 Nuxt 中点击链接下载文件?

    我遇到了一个边缘情况问题 如果用户浏览几条 Nuxt 路线 单击网站 徽标 这是一个锚标记返回主页 然后单击浏览器本机后退按钮 最后单击一个应该的链接要打开 pdf 它会重定向到我的 404 页面 如果用户在页面加载时单击 pdf 链接 它
  • Vue js按钮冻结dom

    我试图在按下按钮时切换包含加载动画的跨度 直到使用 v if 函数完成 但是当我按下按钮时 DOM 冻结并且 span 元素保持不变 直到函数调用结束 如何让 DOM 不冻结并显示加载图标 非阻塞按钮按下可能是一个解决方案 HTML
  • 如何以编程方式添加 Vue 3 组件?

    Vue 3 没有 Vue extend 方法 因此这里的示例不起作用 https css tricks com creating vue js component instances programmatically https css t
  • Vue.js 动态图像路径未加载

    我试图在单个文件组件中动态加载图像 但收到错误消息 指出无法找到该模块 我想我正在尝试做同样的事情这个帖子 https stackoverflow com questions 40491506 vue js dynamic images n
  • 如何从 vue 组件调用 App.vue 中的方法

    我有一个 vue 组件和一个 vue 元素声明 如下所示 Vue component todo item template li This is a todo li methods test function I am getting an
  • 使用 Javascript 在前端创建基本 URL(开发、API 和生产)

    无论开发和部署如何 如何制作适用于 http https localhost 端口和实际域的基本 url 我想创建一个可以在所有场景或条件下工作的基本 url 无论 http https 协议 端口 本地主机和实际域如何 无论是在开发中还是

随机推荐

  • 图解使用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上传视频获取视频宽高、时长信息(多文件、单文件)