微客导航 » 文章资讯 » vue实现移动端input上传视频、音频

vue实现移动端input上传视频、音频

2023-07-18 15:27:04 307

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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue实现移动端input上传视频、音频

热门推荐

随机推荐