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

使用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);

相关推荐
xiaofeichaichai12 分钟前
Vite原理与Webpack对比
前端·webpack·node.js
阿pin14 分钟前
Java随笔-GC收集器工作机制
java·开发语言·jvm·gc
_杨瀚博15 分钟前
小程序拍证件并局部裁剪
前端
2601_9624408418 分钟前
计算机毕业设计之jsp旅游网站管理系统
java·开发语言·算法·课程设计·旅游·推荐算法
默默敲代码的徐哥儿28 分钟前
八股文整理——后端
java·开发语言·spring boot·后端·学习
matlab代码35 分钟前
基于matlab人脸门禁识别系统(可增加其它人脸图像)源码40期】
开发语言·matlab·人脸识别·人脸门禁
张元清37 分钟前
React useReducedMotion Hook:尊重 prefers-reduced-motion(2026)
javascript·react.js
李少兄1 小时前
Java CompletableFuture 解析(含常见面试题)
java·开发语言
逝水无殇2 小时前
C# 枚举(Enum)详解
开发语言·后端·c#
William_Xu2 小时前
React 新旧生命周期对比
前端