element上传视频（添加与修改回显）（可复用）

最新推荐文章于 2024-07-27 14:54:27 发布

龙凯希

最新推荐文章于 2024-07-27 14:54:27 发布

阅读量1.9k

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_51426266/article/details/127426786

版权

父组件

html

<div style="margin: 30px;">

<div>视频上传：</div>

<addPostVideo :showVideoPath="showVideoPath" @video="showVideo"> </addPostVideo>

</div>

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>

<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>