父组件
html
<div style="margin: 30px;">
<div>视频上传:</div>
<addPostVideo :showVideoPath="showVideoPath" @video="showVideo"> </addPostVideo>
</div>
js
import addPostVideo from './addPost_video.vue'//引入子组件
export default {
components: {
addPostVideo
},
data () {
return {
// 视频
showVideoPath:"",}
}
}
子组件
html
<template>
<div>
<el-upload class="avatar-uploader" :action="url" v-bind:on-progress="uploadVideoProcess"
v-bind:on-success="handleVideoSuccess" v-bind:before-upload="beforeUploadVideo"
v-bind:show-file-list="false" :headers="headers">
<video v-if="showVideoPath != '' && !videoFlag" :src="showVideoPath"
class="avatar video-avatar" controls="controls">
您的浏览器不支持视频播放
</video>
<i v-else-if="showVideoPath == '' && !videoFlag" class="el-icon-plus avatar-uploader-icon"></i>
<el-progress v-if="videoFlag == true" type="circle" v-bind:percentage="videoUploadPercent"
style="margin-top: 7px"></el-progress>
</el-upload>
</div>
</template>
js
<script>
export default {
props: ["showVideoPath"],
data() {
return {
url: this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`),
// 上传视频
headers: {
Authorization: this.$cookie.get('token')
},
videoFlag: false,
//是否显示进度条
videoUploadPercent: "",
//进度条的进度,
isShowUploadVideo: false,
// //显示上传按钮
// videoForm: {
// showVideoPath: "", //回显的变量
// },
}
},
watch: {
// 监听 v-model 的值
showVideoPath(e) {
console.log('监听值',e)
},
},
methods: {
//上传前回调
beforeUploadVideo(file) {
var fileSize = file.size / 1024 / 1024 < 50; //控制大小 修改50的值即可
if (
[
"video/mp4",
"video/ogg",
"video/flv",
"video/avi",
"video/wmv",
"video/rmvb",
"video/mov",
].indexOf(file.type) == -1 //控制格式
) {
layer.msg("请上传正确的视频格式");
return false;
}
if (!fileSize) {
layer.msg("视频大小不能超过50MB");
return false;
}
this.isShowUploadVideo = false;
},
//进度条
uploadVideoProcess(event, file, fileList) { //注意在data中添加对应的变量名
this.videoFlag = true;
this.videoUploadPercent = file.percentage.toFixed(0) * 1;
},
//上传成功回调
handleVideoSuccess(res, file) {
this.isShowUploadVideo = true;
this.videoFlag = false;
this.videoUploadPercent = 0;
//后台上传数据
if (res.code == 0) {
this.showVideoPath = res.url; //上传成功后端返回视频地址 回显
this.$emit('video',this.showVideoPath)
} else {
this.$message.error("上传失败!");
}
},
// init(id) {
// this.url = this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`)
// this.visible = true
// },
}
}
</script>
style
<style >
.avatar-uploader-icon {
border: 1px dashed #d9d9d9 !important;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9 !important;
border-radius: 6px !important;
position: relative !important;
overflow: hidden !important;
}
.avatar-uploader .el-upload:hover {
border: 1px dashed #d9d9d9 !important;
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 300px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 300px;
height: 178px;
display: block;
}
</style>