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

使用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 小时前
C++泛型编程(函数模板以及类模板)
开发语言·c++
demi_meng3 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
QX_hao3 小时前
【Go】--map和struct数据类型
开发语言·后端·golang
你好,我叫C小白3 小时前
C语言 循环结构(1)
c语言·开发语言·算法·while·do...while
千码君20164 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
Evand J5 小时前
【MATLAB例程】基于USBL和DVL的线性回归误差补偿,对USBL和DVL导航数据进行相互补偿,提高定位精度,附代码下载链接
开发语言·matlab·线性回归·水下定位·usbl·dvl
lijun_xiao20096 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
爱喝白开水a6 小时前
LangChain 基础系列之 Prompt 工程详解:从设计原理到实战模板_langchain prompt
开发语言·数据库·人工智能·python·langchain·prompt·知识图谱
Neverfadeaway6 小时前
【C语言】深入理解函数指针数组应用(4)
c语言·开发语言·算法·回调函数·转移表·c语言实现计算器
90后的晨仔6 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js