Element ui实现视频上传+进度条

<el-form-item label="上传视频" prop="videoUrl">

            <el-upload
              class="avatar-uploader"
              action="/api/video/uploadVideo"//上传地址
              accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
               :data="paramsdata"//其他参数
              :headers="myHeaders"//设置请求头
              :show-file-list="false"//不允许上传多个
              :before-upload="beforeUploadVideo"//上传前限制大小
              :on-success="handleVideoSuccess" //视频上传成功之后返回视频地址
              :on-progress="uploadVideoProcess">进度条
              <video
                v-if="form.videoUrl1 !='' && videoFlag == false"
                :src="form.videoUrl1"
                width="350"
                height="180"
                controls="controls"
              >您的浏览器不支持视频播放</video>
              <i
                v-else-if="form.videoUrl1 =='' && videoFlag == false"
                class="el-icon-plus avatar-uploader-icon"
              ></i>
              <el-progress
                v-if="videoFlag == true"
                type="circle"
                :percentage="videoUploadPercent"
                style="margin-top:30px"
              ></el-progress>
            </el-upload>
          </el-form-item>
这是设置参数或请求头
   data() {
      return {
        videoFlag:false,      //刚开始的时候显示为flase
        videoUploadPercent: '0%',  //进度条刚开始的时候为0%
        paramsdata:{
          '参数名': “参数的值”}
         //添加其他参数
        },
        myHeaders: {'Authorization': getToken()},
这是调用函数
//上传前限制大小
      beforeUploadVideo (file) {
        const isLt20M = file.size / 1024 / 1024 < 500;
        if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
          this.$message.error('请上传正确的视频格式');
          return false;
        }
        if (!isLt20M) {
          this.$message.error('上传视频大小不能超过500MB哦!');
          return false;
        }
        this.isShowUploadVideo = false;
        this.load=true;
      },
       handleVideoSuccess(res, file) {  //视频上传成功之后返回视频地址

        this.videoFlag = false;
        this.videoUploadPercent = 0;
        this.form.videoUrl1 = res.videoPath;
        this.form.url=res.videoPath
      },
      //进度条
      uploadVideoProcess(event, file, fileList) {

        // this.videoFlag = true
        // this.videoUploadPercent = file.percentage.toFixed(0) * 1
        this.videoFlag = true;
        this.videoUploadPercent = parseInt(file.percentage);
        console.log(this.videoUploadPercent)
      },
 这是css
 <style scoped>
  .avatar-uploader i {
    border: 1px dashed #c0ccda;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
</style>