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

这篇具有很好参考价值的文章主要介绍了elementUI实现上传视频时获取视频时长以及设置视频格式、大小限制。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

前端限制上传视频大小,javascript,前端,vue,elementui,javascript,vue,前端

想了解如何给上传图片添加限制的小伙伴，可以查看作者的另一篇关于图片上传的文章：
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则停止上传
    },
}

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