获取视频的时长参考了文章 https://www.cnblogs.com/65Seeker/p/11466824.html
1.**URL.createObjectURL() **静态方法会创建一个 DOMString
,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document
绑定。这个新的URL 对象表示指定的 File
对象或 Blob
对象。
(个人感觉可以把对象转换成url使用,十分灵活方便,特别是对于文件对象)。
2.loadedmetadata 当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件。音频/视频的元数据包括:时长、尺寸(仅视频)以及文本轨道。
以上是原博主的说明。
结合项目修改了部分,获取图片的url地址也是一样的操作,记录一下。
上传组件
<el-form-item label="上传视频:" prop="videoIntroduce" style="margin-top:20px">
<el-upload ref="upload"
class="avatar-uploader"
:action="actionURL"
:show-file-list="false"
:on-change="beforeAvatarUpload"
:auto-upload="false"
:http-request="handleRequest"
:headers="myHeaders"
accept=".mp4" >
<video v-if="vUrl !='' && videoFlag == false" :src="vUrl" class="avatar"
controls="controls">您的浏览器不支持 video
标签。
</video>
<i v-else-if="vUrl =='' && videoFlag == false" class="el-icon-plus
avatar-uploader-icon">
</i>
<el-progress v-if="videoFlag == true" type="circle" :percentage="progressPercent"
style="margin-top:30px;">
</el-progress>
</el-upload>
</el-form-item>
js
beforeAvatarUpload(event) {
// 获取上传视频的本地localUrl
var localUrl = null;
if (window.createObjectURL != undefined) {
// basic
localUrl = window.createObjectURL(event.raw);
} else if (window.URL != undefined) {
// mozilla(firefox)
localUrl = window.URL.createObjectURL(event.raw);
} else if (window.webkitURL != undefined) {
// webkit or chrome
localUrl = window.webkitURL.createObjectURL(event.raw);
}
// 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
console.log(localUrl)
//获取视频时长
var url = URL.createObjectURL(event.raw);
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);
});
if (event.raw.type === "video/mp4") {
this.handleRequest() //验证通过,手动上传文件
this.vUrl = localUrl
} else {
this.$message.error("只能上传mp4格式");
}
},