vue element-upload上传视频或音频获取视频时长

做这步操作主要是后端要求传视频的时长duration这个字段，获取方法

第一种：

<el-upload class="upload-demo":multiple="multiple":before-upload="getVideoToken"action="http://up-z2.qiniu.com":on-success="successVideo":data="uploadToken":file-list="fileList"
><el-button size="small" type="primary">点击上传</el-button>
</el-upload>//js部分：
//第一种在上传文件之前的钩子函数里获取
getVideoToken(file){var url = URL.createObjectURL(file);         var audioElement = new Audio(url);         var duration;audioElement.addEventListener("loadedmetadata",function() {           duration =parseInt(audioElement.duration); //时长为秒，取整          console.log(duration);         });
}
//第二种在上传成功后获取
successVideo: function (response, file, fileList) {var url = URL.createObjectURL(fileList[0].raw);         var audioElement = new Audio(url);         var duration;audioElement.addEventListener("loadedmetadata",function() {           duration =parseInt(audioElement.duration) ; //时长为秒         console.log(duration);         });
}
注：如果上传多个视频文件 要for循环
successVideo: function (response, file, fileList) {for(let i=0;i<fileList.length;i++){var url = URL.createObjectURL(fileList[i].raw);         var audioElement = new Audio(url);         var duration;audioElement.addEventListener("loadedmetadata",function() {           duration =parseInt(audioElement.duration) ; //时长为秒         console.log(duration);         });}}
//第三种不使用事件监听
successVideo: function (response, file, fileList) {var url = URL.createObjectURL(fileList[0].raw);         var audioElement = new Audio(url);         var duration;//扩展 onloadedmetadata 视频加载完执行，onload图片加载完执行audioElement.onloadedmetadata = () => {duration = parseInt(audioElement.duration); //时长为秒，取整};
}

vue element-upload上传视频或音频获取视频时长相关推荐

vue+element语音上传
vue+element语音上传 html <el-form ref="audioForm" :model="audioForm" :rules=" ...
vue使用upload上传附件
vue使用upload上传附件这里的上传附件包括视频,图片,等各种格式效果图文章目录 vue使用upload上传附件这里的上传附件包括视频,图片,等各种格式效果图 ![在这里插入图片描述]( ...
Vue+element ui 上传视频
直接上代码 (利用了阿里云浏览器直传方式) <el-form-item label="视频:" :label-width="formLabelWidth" ...
基于vue element 封装上传组件
基于vue element封装的上传组件使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装因为我暂时没用到其他的哈哈哈) <template& ...
关于element upload上传时额外参数的问题
笔者在用上传模块时存在一个问题,每次带的额外参数在第一次时都为空.因为涉及额外参数所以笔者用的是手动上传. <el-uploadclass="upload-demo"ref= ...
解决element Upload 上传出现Access to XMLHttpRequest at
Access to XMLHttpRequest at 'http://192.168.12.119/api/design/upload_img' from origin 'http://localh ...
antd vue form upload 上传
<template><div><a-form :form="form" :label-col="{ span: 5 }" :wra ...
vue element el-upload 上传文档、压缩包表格
el-upload 上传文档.压缩包表格废话不多say 上代码
java 上传mp3文件大小,Java获取音频文件（MP3）的播放时长
最近的一个项目需要按照时间播放mp3文件,例如,播放10分钟的不同音乐. 这就意味着我得事先知道mp3文件的播放时长,以决定播放几遍这个文件. 方案一:Java的方式找第三方的库,真的感谢这些提供j ...

vue element-upload上传视频或音频获取视频时长

vue element-upload上传视频或音频获取视频时长相关推荐

最新文章

热门文章