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); //时长为秒，取整
	};
}