需求：基于element-UI上传视频

一、首先看成果图：

后台管理页面，上传之后可进行播放

后台管理编辑页面

移动端页面

移动端显示情况

二、实现步骤

1、表单内

<el-form-item   label="添加视频" class="video-upload">

              <el-upload
                class="avatar-uploader"
                :action="uploadURL"
                accept=".mp4, .qlv, .qsv, .ogg, .flv, .avi, .wmv, .rmvb"
                :data="paramsdata"
                :show-file-list="false"
                :before-upload="beforeUploadVideo"
                :on-success="handleVideoSuccess"
                :on-progress="uploadVideoProcess"
              >

                <video
                  v-if="formData.videoUrl !='' && videoFlag == false" 
                  :src="formData.videoUrl"
                  width="350"
                  height="180"
                  controls="controls"
                >您的浏览器不支持视频播放</video>

                <el-progress
                id="hhh"
                  v-if="videoFlag == true"
                  type="circle"
                  :percentage="videoUploadPercent"
                  style="margin-top:30px"
                ></el-progress>
              </el-upload>
</el-form-item>

2、在方法中定义以下方法

 methods: {
    beforeUploadVideo(file) {
      //视频上传之前判断他的大小
      const isLt10M = file.size / 1024 / 1024 < 20;
      if (!isLt10M) {
        this.$message.error("上传视频大小不能超过20MB哦!");
        return false;
      }
    },
    uploadVideoProcess(event, file, fileList) {
      //视频上传的时候获取上传进度传给进度条
      this.videoFlag = true;
      this.videoUploadPercent = parseInt(file.percentage);
      console.log(this.videoUploadPercent);
    },
    handleVideoSuccess(res, file) {
      //视频上传成功之后返回视频地址
      this.videoFlag = false;
      this.formData.fileName = res.data.fileName;
      this.formData.filePath = res.data.filePath;
      this.formData.videoUrl = this.url + res.data.filePath + res.data.fileName;
      this.videoUploadPercent = 0;
      console.log("视频", res);
    },
}