视频上传,限制时长,获取视频时长

使用element的upload上传文件时,除了类型和大小,需求需要限制只能长传18秒内的视频,这里通过upload的before-upload,以及创建一个音频元素对象拿到durtaion时长属性来实现。

javascript 复制代码
   getVideoTime(file) {
      return new Promise(async (resolve, reject) => {
        let url = URL.createObjectURL(file);
        let audioElement = new Audio(url);
        let durtaion = 0;
        audioElement.addEventListener('loadedmetadata', function () {
          durtaion = audioElement.duration;
          resolve(parseFloat(durtaion));
        });
      });
    },

loadedmetadata 事件是当指定的音频/视频的元数据已加载时触发,就可以得到元数据,包括时长,尺寸等;

这里使用promise是因为加载音频元数据这是一个异步操作。

在上传文件之前的钩子里就可以拿到视频的时长做判断了,videoTimes的单位是秒。

let videoTimes = await this.getVideoTime(file);

相关推荐
大牧师2 分钟前
Nest.js 微服务入门教程
开发语言·javascript·后端·微服务·node.js·nest.js·nest
格林威5 分钟前
C# 图像异步落盘存储:基于Channel 配合 ArrayPool 实现异步落盘
开发语言·人工智能·数码相机·机器学习·计算机视觉·c#·视觉检测
软件黑马王子6 分钟前
11.缓存池优化:窗口布局
开发语言·前端框架·c#
做萤石二次开发的哈哈6 分钟前
海康班班通交互一体机技能接入实战:ISAPI透传+OTAP双协议封装,Web/App/小程序教学管理应用一站生成
前端·物联网·小程序·交互·萤石开放平台·蓝海aiot一站式工作台·aiot开发
计算机魔术师9 分钟前
Anthropic一次性锁死十年算力,5170亿美元买什么
前端
深圳市益普科技有限公司10 分钟前
半导体MES的数字孪生:虚拟调试如何把上线风险提前清零
java·开发语言
IT_陈寒11 分钟前
Redis的订阅丢失消息?你可能忘了这个配置
前端·人工智能·后端
头茬韭菜16 分钟前
第 3 篇:「Pydantic 即 Schema」—— 工具生态三层解剖
前端·chrome·ai·openmanus
低代码布道师17 分钟前
外包项目管理平台全栈实战课02搭建数据底座:Next.js + PostgreSQL + Prisma 7
开发语言·javascript·postgresql·全栈开发