el-upload上传视频参考

组件代码

<!-- 上传封面视频的对话框 -->
    <el-dialog
    title="封面视频"
    :visible.sync="addvideoDialog"
    width="30%"
    >
    <el-form ref="videoFormRef" :model="videoForm" label-width="90px">
          <el-form-item label="封面视频">
            <el-upload
                drag
                :action="uploadvideoUrl"
                :on-success="handleVideoSuccess"
                :before-upload="beforeUploadVideo"
                :on-progress="uploadVideoProcess"
                :show-file-list="false"
                :headers="headerObj"
                multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传mp4文件，且不超过20MB</div>
             <el-progress v-if="videoFlag == true"
            class="progressed" 
            type="circle" 
            :percentage="videoUploadPercent" 
            style="margin-top:30px;"
            ></el-progress>
            <video v-if="videoForm.Video !='' && videoFlag == false"
            width="360"
            heihht="180"
            :src=" videoBaseurl + videoForm.Video" 
            class="avatar" 
            controls="controls">您的浏览器不支持视频播放</video>
            </el-upload>
          </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="addvideoDialog = false">取 消</el-button>
        <el-button type="primary" @click="addVideoBtn">确 定</el-button>
    </span>
    </el-dialog>

data中定义：

// 展示视频拼接路径，这里路径是在其他地方定义过要引入进来的方便管理
    videoBaseurl: videoBaseurl,
    // 展示视频表单对象
    showvideoForm: {
        index_video: '',
        teach_video: ''
    },
    // 控制编辑视频对话框的显示隐藏
    addvideoDialog: false,
    videoFlag: false,
    videoForm: {
        index_video: '',
        Video: ''
    },
    // 进度百分比
    videoUploadPercent: 0,

methods中的方法

// 编辑封面视频
    editvideoBtn() {
        this.addvideoDialog = true
    },
    // 1. 文件上传之前的钩子，参数为文件
        beforeUploadVideo(file) {
            console.log(file);
        const isLt10M = file.size / 1024 / 1024  < 10;
        if (['video/mp4'].indexOf(file.type) == -1) {
            this.$message.error('请上传正确的视频格式');
            return false;
        }
        if (!isLt10M) {
            this.$message.error('上传视频大小不能超过10MB哦!');
            return false;
        }
    },
    // 2. 文件上传时的钩子
    uploadVideoProcess(event, file, fileList){
        console.log(event);
        console.log( file);
        console.log( fileList);
        this.videoFlag = true;
        this.videoUploadPercent = Math.floor(event.percent)
    },
    // 3. 上传成功，视频显示是在上传成功后后台返回视频地址，直接显示在页面中的
    handleVideoSuccess(res, file) {       //获取上传图片地址
        this.videoFlag = false;
        this.videoUploadPercent = 0;
        if(res.stat == 1){
            this.videoForm.index_video = res.data.url
            this.videoForm.videoUploadId = res.data.uploadvideoUrl;
            this.videoForm.Video = res.data.url;
        }else{
            this.$message.error('视频上传失败，请重新上传!');
        }
    },
    // 确定编辑视频
    async addVideoBtn() {
        const{data: res} = await editHomeTableData({value: this.videoForm.index_video, name: 'index_video'})
        console.log(res);
        if(res.stat !== 1) return this.$mesage.error('视频编辑失败')
        this.gethomevideo()
        this.addvideoDialog = false
        this.$message.success('视频编辑成功')
    },

进度条和对话框中播放器样式

.avatar {
    position: absolute;
    left: -1px;
    top: -1px;
}
.progressed {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

下边是效果图

我这里上传过视频之后对话框中会出现视频播放组件大小跟上传组件一样大能播放，但我关闭对话框之后再次点开对话框里边的播放器内容一直没办法重置刷新除非刷新页面，写的不太好还需要改进，大家有好的方法可以分享一下。