elementUI实现上传视频时获取视频时长以及设置视频格式、大小限制

在 before-upload 属性绑定的事件中可以获取上传视频的信息对象，通过给这个信息对象内的属性添加判断条件就可以实现对视频的格式及大小进行限制。对于视频时长，也包含在信息对象中，根据下面代码所示方法提取即可。

想了解如何给上传图片添加限制的小伙伴，可以查看作者的另一篇关于图片上传的文章：
elementUI设置上传图片的格式、大小限制

具体实现代码：

<el-upload
    :action="action"
    :before-upload="onBeforeVideoUpload"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

data(){
	return{
		duration: 0,//视频时长
	}
}，

methods: {
	//对视频的格式进行限制
    onBeforeVideoUpload(file){
      // 获取后缀名
      const suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      // 判断是否符合文件大小的限制需求
      const isLt2M = file.size / 1024 / 1024 < this.maxSize
      // 判断是否符合文件类型需求
      const isLtType = ["video/mp4", "video/ogg", "video/flv", "video/avi", "video/wmv", "video/rmvb", "video/mov"]

      if (!isLt2M) {
        this.$message({
          message: `上传文件大小不能超过${this.maxSize}M!`,
          type: 'warning'
        })
      }

      let correctType = true
      //限制视频格式
      if(isLtType.indexOf(file.type) == -1){
        correctType = false
        this.$message({
          message: '请上传视频格式文件',
          type: 'warning'
        })
      }else{
        correctType = true
      }

      //获取视频时长
      let url = URL.createObjectURL(file);
      let audioElement = new Audio(url);
      let duration;
      let fun = (duration) => {
        this.duration = duration
      }
      //下面需要注意的是在监听loadedmetadata绑定的事件中对duration直接进行赋值是无效的，需要在fun回调函数中进行赋值
      audioElement.addEventListener("loadedmetadata", function() { //音频/视频的元数据已加载时，会发生 loadedmetadata 事件
        duration = audioElement.duration; //时长以秒作为单位
        fun(parseFloat(duration).toFixed(1))
      });

      return isLt2M && correctType //返回false或者reject状态的promise则停止上传
    },
}

👇觉得有帮助的朋友可以支持下作者哦，您的鼓励是我创作的最大动力，如有开发问题可联系作者
文章来源地址https://www.toymoban.com/news/detail-621551.html

到了这里，关于elementUI实现上传视频时获取视频时长以及设置视频格式、大小限制的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！