vue element-ui中上传音乐，获取音乐时长，名字等信息

有的时候需要在上传音乐的时候，就获取这个音乐的一些信息

 handleMusic(response, file, fileList){//上传音乐this.musicKey = response.key  //获取keythis.shangchuan = fileList[0].url //获取本地的链接var musicname = fileList[0].name  //获取音乐名字var du =document.getElementById('up_audio')let that = this;du.oncanplaythrough = function(){var time = du.durationthat.musciLength = Math.floor(time).toString()}let mu = musicname.substring(0,musicname.indexOf('.mp3'))  //截取.MP3前面的字符if(mu.length>=15){mu =  mu.substring(0,25)}this.musictitle =  mu},

在flieList里面就能有上传出来获得到的 url 也就是 (在这里我是用的element-ui里面的upload里面的事件函数)

var url = URL.createObjectURL(content);

这个方法得到的url，然后把url赋值给一个我们事先隐藏的空的audio标签，找到这个标签，使用 oncanplaythrough方法播放，在这个方法里面外面就能得到时长duration

vue element-ui中上传音乐，获取音乐时长，名字等信息相关推荐

vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
Vue+element ui 上传视频
直接上代码 (利用了阿里云浏览器直传方式) <el-form-item label="视频:" :label-width="formLabelWidth" ...
vue element ui跳转页获取跳转前页面列表里的行id
后台管理系统经常要用到列表,在列表的每一行经常需要做编辑操作,自己做项目的时候,编辑页用了一个新的隐藏页,通过路由加载,隐藏页需要获取前一页当前行的id,可以在跳转时携带一个行参数id,通过this. ...
vue + element UI【实战】音乐播放器/语音条（内含音频的加载、控制，事件监听，信息获取，手机网页阴影的去除等技巧）
相关技巧,详见注释 <template><div class="container"><h2>{{ mu ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...

vue element-ui中上传音乐，获取音乐时长，名字等信息

vue element-ui中上传音乐，获取音乐时长，名字等信息相关推荐

最新文章

热门文章