视频上传，可以限制大小

HTML:

<template>
<div class="video-box">
<div class="space-header">
<img @click="goBack()" class="left" src="../../../../images/[email protected]" alt="图片不显示">
<span class="title-kj">视频上传</span>
<span class="right" @click="save">保存</span>
</div>
<div class="video-main">
<div class="main">
<div class="add-video" v-show="add">
<span>添加视频</span>
<div class="addd" @click="upload">
<div></div>
<div></div>
</div>
</div>
<div class="video" v-show="have">
<video :src=vide controls="controls" preload="auto"></video>

</div>
<div class="delete" @click="dele"><img src="../../../../images/del.png"> </div>
</div>
</div>

<div v-show="meaning">
<div class="css" >图片不能为空</div>
</div>
</div>
</template>

上传前：

视频上传，可以限制大小

上传后

视频上传，可以限制大小

//text1（）后台的http地址
var http = this.text1()

// 视频展示
this.$http.get(获取视频接口, {
}).then(response => {
that.vide =that.text1()+response.data.data.path
if(that.vide!=""){
that.add=false
that.have=true
}

})

},
methods:{
goBack(){
this.$router.go(-1)
},

//点击删除图片
dele:function(){
this.add=true
this.vide=""
this.have=false
},

upload:function () {
// 点击弹出选择框
api.actionSheet({
cancelTitle :'取消',
buttons : ['手机相册']
}, function(ret, err) {
if (ret) {
// 调用拍照功能
getPicture(ret.buttonIndex);
}
});

let that=this;
let thathttp=this.$http

//限制时长
duration:60
}, function(ret, err) {
let thathttp=this.$http

if (ret) {
// ret弹出视频的时长，1比1000；
// alert(1)
// alert(JSON.stringify(ret));
if(ret>60000){
alert(JSON.stringify("视频大于x分钟，无法上传"));
}else{
alert(2)
// 显示视频
that.add=false;
that.have=true;
// alert(JSON.stringify(path));
that.vide=path
// alert(JSON.stringify(that.vide));
}

} else {
// alert(3)
alert(JSON.stringify(err));
}
})

}
});
}}
},

//点击保存按钮
save:function(){
let thathttp=this.$http
var that=this;
if(that.vide==""){
//提示图片为空
}
// 上传图片
// 下面video参数名字前后端一致
api.ajax({
method:"post",
url:传入接口,
data:{
files: {
video:that.vide
}
},
dataType:'json',
async:true,
},function(ret,err){
if(ret.code==200){
// alert(1)
// alert(JSON.stringify(that.vide));
that.$router.push('/index')
}else {
// alert(2)
alert(JSON.stringify(err));
}
})
}

}
}
</script>

样式
<style scoped>
.css{
position: absolute;
left: 0.37rem;
top: 2.2rem;
font-size: 0.22rem;
height: 1rem;
width: 3rem;
background: #fff;
border: .01rem solid #00B2F0;
border-radius: 0.04rem;
text-align: center;
line-height:1rem;
z-index: 100;
}
#box{
width: 100%;
height: 0.5rem;
position: fixed;
bottom:0;
left: 0;
text-align: center;
font-size: 0.14rem;
z-index: 200;
background: #3ABA63;
line-height: 0.5rem;
}

.video-box{
width: 100%;
height: 100%;
/*display: flex;*/
min-height: 100vh;
background-color: #F7F7F7;
}
/*头部样式*/
.space-header{
font-size: 0;
position:fixed;
top: 0;
width: 100%;
height:.49rem;
line-height: .49rem;
vertical-align: middle;
text-align: center;
background-color:#44b6e2 ;
z-index: 999;
color: #ffffff;
}
.space-header .title-kj{
font-size: .16rem;
height: .21rem;
font-weight: bold;
}
.space-header .left{
position: absolute;
top:50%;
transform:translateY(-50%);
left: .12rem;
width: .09rem;
height: .15rem;
}
.space-header .right{
font-size: 0.14rem;
float: right;
position: absolute;
top: 50%;
transform:translateY(-50%);
right: .12rem;
color: #ffffff;
}
/*main样式*/
.video-main{
padding-top: 0.55rem;
}
.main{
background-color: #FFFFFF;
}
.video-main .add-video{
font-size: 0.14rem;
}
.add-video span{
padding-left: 0.12rem;
display: inline-block;
margin-top: 0.1rem;
}
.addd{
box-sizing: border-box;
width: 94%;
height: 2rem;
border: 0.01rem solid black;
margin-top: 0.1rem;
position: relative;
margin-left: 3%;
}
.addd div:nth-child(1){
width: 0.15rem;
height: 0.6rem;
background: black;
margin: 0.7rem auto;
border-radius: 0.1rem;
}
.addd div:nth-child(2) {
width: 0.6rem;
height: 0.15rem;
background: black;
position: absolute;
left: 1.46rem;
top: 0.93rem;
border-radius: 0.1rem;
}
.delete{
width: 100%;
height: .35rem;
background: #ffffff;
}
.delete img{
margin: .12rem 0;
margin-left: 93%;
}
.video video{
margin-top: .12rem;
width: 94%;
height: 2rem;
margin-left: 3%;
}
</style>

视频上传，可以限制大小

相关推荐