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;
      }
    },