vue 获取视频时长的实例代码

 更新时间:2019年08月20日 10:28:41   作者:大稳·杨  
这篇文章主要介绍了vue 获取视频时长的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

直接通过element-ui自带的上传组件结合js即可,代码如下:

HTML:     

<el-upload class="upload-demo" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess"
     :before-upload="beforeAvatarUpload">
     <button class="ce-button not-hover primary">
      <i class="ce-icon_upload"></i>
      <span>重新上传</span>
     </button>
    </el-upload>

js:

 beforeAvatarUpload(file) {
    var fileName = file.name || ''
    var ext = fileName.split('.')[fileName.split('.').length - 1]
    if (ext !== "doc" && ext !== "docx" && ext !== "xls" && ext !== "xlsx"
     && ext !== "ppt" && ext !== "pptx" && ext !== "pdf" && ext !== "mp4") {
     this.$notify({
      title: "失败",
      message: "上传资源只能是 doc/docx/xls/xlsx/ppt/pptx/pdf/mp4 格式!",
      type: "error",
      duration: 3000
     });
     return false
    }
    // ppt(10MB),word(10MB),excel(5MB)
    if (ext == "doc" || ext == "docx" || ext == "ppt" || ext == "pptx") {
     debugger
     if (parseInt(file.size) > parseInt('10485760‬')) {
      this.$notify({
       title: "失败",
       message: "上传word、ppt文件上限为10MB!",
       type: "error",
       duration: 3000
      });
      return false
     }
    }
    if (ext == 'mp4') { // 获取视频时长
     var url = URL.createObjectURL(file);
     var audioElement = new Audio(url);
     var duration;
     audioElement.addEventListener("loadedmetadata", function (_event) {
      duration = audioElement.duration; //时长为秒,小数,182.36
      this.$parent.$data.wDuration = parseInt(duration)
      console.log(duration);
     });
    }
    this.$parent.$data.wFileName = file.name
    this.$parent.$data.wSize = parseFloat(file.size / 1024).toFixed(2) //获取文件大小
   }

总结

以上所述是小编给大家介绍的vue 获取视频时长的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎欢迎给我留言,小编会及时回复大家的!

相关文章

  • vue项目中使用ts(typescript)入门教程

    vue项目中使用ts(typescript)入门教程

    最近项目需要将原vue项目结合ts的使用进行改造,本文从安装到vue组件编写进行了说明,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 探秘Vue异步更新机制中nextTick的原理与实现

    探秘Vue异步更新机制中nextTick的原理与实现

    nextTick 是 Vue 提供的一个重要工具,它的作用主要体现在帮助我们更好地处理异步操作,下面就跟随小编一起来探索一下nextTick的原理与实现吧
    2024-02-02
  • vue中resetFields重置初始值不生效的原因详解

    vue中resetFields重置初始值不生效的原因详解

    resetFields 对整个表单进行重置,将所有字段值重置为空并移除校验结果,下面这篇文章主要给大家介绍了关于vue中resetFields重置初始值不生效的原因的相关资料,需要的朋友可以参考下
    2023-03-03
  • Vue.js中provide/inject实现响应式数据更新的方法示例

    Vue.js中provide/inject实现响应式数据更新的方法示例

    这篇文章主要介绍了Vue.js中provide/inject实现响应式数据更新,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue微信项目按需授权登录策略实践思路详解

    Vue微信项目按需授权登录策略实践思路详解

    这篇文章主要介绍了Vue微信项目按需授权登录策略实践思路详解,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • 详解如何在Vue里建立长按指令

    详解如何在Vue里建立长按指令

    这篇文章主要介绍了详解如何在Vue里建立长按指令,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue pinia模块化全局注册详解

    Vue pinia模块化全局注册详解

    这篇文章主要介绍了Vue pinia模块化全局注册,Pinia是Vue.js团队成员专门为Vue开发的一个全新的状态管理库,并且已经被纳入官方github
    2023-02-02
  • vue 指令与过滤器案例代码

    vue 指令与过滤器案例代码

    这篇文章主要介绍了vue 指令与过滤器,本文通过案例代码给大家详细讲解,给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • vue中swiper vue-awesome-swiper的使用方法及各种坑解决

    vue中swiper vue-awesome-swiper的使用方法及各种坑解决

    这篇文章主要介绍了vue中swiper vue-awesome-swiper的使用方法及各种坑解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 关于vue中api统一管理的那些事

    关于vue中api统一管理的那些事

    最近在学习Vue教程,下面这篇文章主要给大家介绍了关于vue中api统一管理的那些事,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2022-04-04

最新评论