vue上传文件加进度条，fake-progress一起使用

el-upload上传过程中加进度条，进度条el-progress配合fake-progress一起使用，效果如下：

?安装

npm install fake-progress

在用到的文件里面引用

import Fakeprogress from "fake-progress";

?这个进度条主要是假的进度条，他开始加载后一直不会加载到100%，只有在结束的时候才会到100%

<el-progress type="circle" :percentage="parseInt(fake.progress * 100)"></el-progress>

?fake: new Fakeprogress({

? ? ? ? timeConstant: 10000,

? ? ? ? // autoStart: true,

}),

进度条开始：this.fake.start();

进度条结束：this.fake.end();

?完整代码

<template>
 <div>
   <el-upload
        ref="upload"
        v-model="file"
        class="upload-import"
        action=""
        :accept="jpg,png,text"
        :auto-upload="true"
        :show-file-list="FileList"
        :http-request="handleUpload"
        :before-upload="beforeUpload"
        :on-change="handleChange"
        :on-exceed="handleExceed"
        :before-remove="beforeRemove"
        drag
        multiple
        :disabled="uploadLoading"
      >
      </el-upload>
      <div class="upload-loading-mask" v-if="uploadLoading">
          <el-progress
            type="circle"
            :percentage="parseInt(fake.progress * 100)"
          ></el-progress>
      </div>
   </div>
</template>
 
<script>
export default {
  data() {
    return {
      uploadLoading: false,
      file: "",
      fileList: [],
      fake: new Fakeprogress({
        timeConstant: 10000,
        // autoStart: true,
      }),
      fileCount:0,
      fileTotal:0
    };
  },
  mounted() {

  },
  methods: {
    async handleUpload(file) {
      this.fake.progress = 0;
      if (file.file.size === 0) {
        this.$message.error(`不能上传空文件`);
        return;
      }
      this.uploadLoading = true;
      this.fake.start();
      await Api.uploadFiles(params).then(res) => {
          if (res) {
            this.fileCount++;
            if (this.fileCount === this.fileTotal) {
              this.fileCount = 0;
              this.fake.end(); //结束进度条
              this.uploadLoading = false;
            }
          } else {
            this.fake.end();
            this.uploadLoading = false;
            return;
          }
        })
        .catch((err) => {
          this.fake.end();
          this.fake.progress = 0;
          this.uploadLoading = false;
          console.log(err);
        });
    },
    beforeUpload(file) {},
    handleChange(filelist) {
      this.fileTotal = filelist.length;
    },
    beforeRemove(){}
  }
};
</script>

?