做这步操作主要是后端要求传视频的时长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); //时长为秒,取整
	};
}

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 8 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐