vue实现移动端input上传视频、音频
vue移动端input上传视频、音频,供大家参考,具体内容如下
html部分
现场视频
vue移动端input上传视频、音频,供大家参考,具体内容如下
html部分
现场视频
js部分
getVideo(ev,typer){ lettaht=this //获取上传文件标签 letfilesId=document.getElementById('pop_video'); //获取音频标签 letvideoId=document.getElementById('videoId') //把当前files[0]传给getFileURL方法,getFileURL方法对其做一处理 leturl=this.getFileURL(filesId.files[0]) if(url){ //给video标签设置src videoId.src=url } letformData=newFormData(); formData.append("file",filesId.files[0]); upload(this.token,formData).then(res=>{ console.log(res) if(res.data.code===0){ this.videoURL=res.data.data.url } }) console.log(url) }, getAudio(ev,typer){ lettaht=this //获取上传文件标签 letfilesId=document.getElementById('pop_audio'); //获取音频标签 letaudioId=document.getElementById('audioId') //把当前files[0]传给getFileURL方法,getFileURL方法对其做一处理 leturl=this.getFileURL(filesId.files[0]) if(url){ //给video标签设置src audioId.src=url } letformData=newFormData(); formData.append("file",filesId.files[0]); upload(this.token,formData).then(res=>{ console.log(res) if(res.data.code===0){ this.audioURL=res.data.data.url } }) console.log(url) }, getFileURL(file){ letgetUrl=null if(window.createObjectURL!=undefined){ //basic getUrl=window.createObjectURL(file) }elseif(window.URL!=undefined){//window.URL标准定义 //mozilla(firefox) //获取一个http格式的url路径,这个时候就可以设置中的显示 getUrl=window.URL.createObjectURL(file) }elseif(window.webkitURL!=undefined){//window.webkitURL是webkit的内核 //webkitorchrome getUrl=window.webkitURL.createObjectURL(file) } returngetUrl //video标签的duration属性,获取当前视频的长度 //letduration=videoId.duration //if(Math.floor(duration)>60){ //that.layer.msg('视频不能大于60秒') //} },
css部分
#inspect.upLoad{ background-color:#fff; /*height:1.5rem;*/ text-align:left; padding:0.3rem; } #inspect.inputVideo{ background-color:#00cc66; color:#fff; font-size:0.32rem; width:30%; height:0.8rem; line-height:0.8rem; border-radius:0.4rem; text-align:center; margin:0auto; } #inspect.inputAudio{ background-color:#5cadff; color:#fff; font-size:0.32rem; width:30%; height:0.8rem; line-height:0.8rem; border-radius:0.4rem; text-align:center; margin:0auto; }
效果图
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。