vue+element upload组件自定义上传进度条

element upload组件自定义上传时会丢失上传进度，解决方法自定义上传时，接口添加onUploadProgress获取上传进度信息。
代码如下：

// 上传组件
<el-dialog title="文件导入" :visible.sync="dialogImportVisible">
      <el-row>
        <el-col align="center">
          <el-upload
            v-if="!importStatus"
            ref="upload"
            action=""
            drag
            multiple
            accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            :http-request="upLoadMethod"
            :before-remove="beforeRemove"
            :on-remove="handleRemove"
            :file-list="fileList"
            :on-change="fileChange"
            :limit="3"
            :on-exceed="handleExceed"
            :auto-upload="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              <el-button type="text" @click="downTemplate"
                >点击下载信息导入模板文件</el-button
              >
            </div>
          </el-upload>
          <el-progress
            v-if="progress"
            :percentage="progressPercent"
            :status="importStatus"
          ></el-progress>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="!importStatus"
          type="success"
          @click="submitUpload"
          :loading="progress"
          >导 入</el-button
        >
        <el-button v-else @click="dialogImportVisible = false">关 闭</el-button>
      </div>
    </el-dialog>


// 数据定义
data() {
    return {
      progress: false,
      progressPercent: 0,
      importStatus: "",
      dialogImportVisible: false,
      fileData: "", //FormData上传文件
      fileList: [], //upload文件列表
    }
  },




// 上传文件数量限制提示
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    // 移除时
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 移除前
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件改变
    fileChange(file, fileList) {
      let existFile = fileList
        .slice(0, fileList.length - 1)
        .find((f) => f.name === file.name);
      if (existFile) {
        this.$message.error("当前文件已存在");
        fileList.pop();
      }
      this.fileList = fileList;
    },
    // 自定义上传
    upLoadMethod(file) {
      this.fileData = new FormData();
      const isLt50M = this.fileList.every(
        (file) => file.size / 1024 / 1024 < 50
      );
      if (!isLt50M) {
        this.$message.error("请检查，上传文件大小不能超过50M");
      } else {
        this.fileData.append("file", file.file);
        this.progressPercent = 0;
        const uploadEvent = (progressEvent) => {
          this.progressPercent = Number(
            ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
          );
        };
        // 接口上传
        apiImport(this.fileData, uploadEvent).then((res) => {
          if (res.code === 200) {
            this.$message.success("上传成功");
            this.importStatus = "success";
          } else {
              this.importStatus = "exception";
              this.$message.error("导入失败，请检查文件是否正确");
          }
        });
        this.$refs.upload.clearFiles();
        this.fileData = "";
        this.fileList = [];
      }
    },



submitUpload() {
      this.progress = true;
      this.$refs.upload.submit();
    },


    // 文件上传接口，添加onUploadProgress获取上传进度信息
export function apiImport (data,onUploadProgress) {
  return request({
    url: 'xxx',
    method: 'post',
    headers: { 'Content-Type': 'multipart/form-data' },
    responseType: 'blob',
    data: data,
    onUploadProgress
  })
}