element upload上传视频,获取本地url地址和时长

您所在的位置:网站首页 获取youtube的视频地址 element upload上传视频,获取本地url地址和时长

element upload上传视频,获取本地url地址和时长

2024-06-16 13:18| 来源: 网络整理| 查看: 265

获取视频的时长参考了文章 https://www.cnblogs.com/65Seeker/p/11466824.html

1.**URL.createObjectURL() **静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

(个人感觉可以把对象转换成url使用,十分灵活方便,特别是对于文件对象)。 2.loadedmetadata 当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件。音频/视频的元数据包括:时长、尺寸(仅视频)以及文本轨道。

以上是原博主的说明。

结合项目修改了部分,获取图片的url地址也是一样的操作,记录一下。

上传组件

您的浏览器不支持 video 标签。

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格式"); } },

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3