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

JuS巨山超力霸

已于 2023-08-18 18:13:27 修改

阅读量1.5k

点赞数

文章标签：前端 javascript 开发语言

于 2023-08-18 18:13:14 首次发布

本文链接：https://blog.csdn.net/m0_49623851/article/details/132367045

版权

文章讲述了如何在使用Element的upload组件上传文件时，通过before-upload钩子和创建Audio元素获取视频时长，确保视频不超过18秒。利用loadedmetadata事件处理异步音频元数据加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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