父组件

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>