el-upload上传文件实现视频上传

上传成功后，下面的滚动条和文件名消失

 <el-form-item label="上传视频" prop="videoPath" :required="videoTo">
          <el-upload
            ref="video"
            class="upload-demo"
            v-model="form.videoPath"
            drag
            action="/api/EToolFile"
            :multiple="false"
            :before-upload="beforeUploadVideo"
            :http-request="UploadVideo"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
          //进度条
          <el-progress
            v-show="progressFlag"
            :percentage="loadProgress"
          ></el-progress>
</el-form-item>

 return {
      progressFlag: false,
      loadProgress: 0,
     }

method中的方法

//视频上传
    UploadVideo(params) {
      this.form.videoPath = URL.createObjectURL(params.file);
      this.progressFlag = true;
      this.loadProgress = 0;
      const interval = setInterval(() => {
        if (this.loadProgress >= 99) {
          clearInterval(interval);
          return;
        }
        this.loadProgress += 1;
      }, 20);
      upload("/api/EToolFile", params.file).then((res) => {
        console.log(res);
        this.form.videoPath = res.data.data.name;
        this.progressFlag = false;
        this.loadProgress = 100;
        this.$message({
          type: "success",
          message: "上传成功!",
        });
        // 清空上传列表
        this.$refs.video.clearFiles();
      });
    },
    beforeUploadVideo(file) {
      const isLt30M = file.size / 1024 / 1024 < 30;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt30M) {
        this.$message.error("上传视频大小不能超过30MB哦!");
        return false;
      }
    },