vue 上传文件时，显示懒加载

在要加载的组上加上

<template slot-scope="scope" slot="pathForm">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :data="{
              FoldPath: '上传目录',
              SecretKey: '安全验证',
              isAsync: true
            }"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            :show-file-list="false"
            :disabled="disabled"
            v-loading="uploading"//懒加载控件
          >
            <el-button v-if="form.path == ''" size="small" type="primary"
              >上传文件</el-button
            >

            <div v-else>{{ form.path }}</div>
            <icon icon="el-icon-loading" v-if="form.path == ''" />
          </el-upload>
        </template>

在data中定义

 data() {
    return {
      uploading: false,
    }
}

文件加载

 methods: {
    beforeUpload(file) {
      this.uploading = true;//上传时显示
      console.log(file);
      this.form.size = file.size;
      var fileSize = file.size / 1024 / 1024 < 100;
      this.$message("正在上传中，请稍后");
      if (
        // ["application/vnd.android.package-archive", ""].indexOf(file.type) == -1
        ["application/x-zip-compressed", ""].indexOf(file.type) == -1
      ) {
        this.$message("请上传正确的格式");
        return false;
      }
      if (!fileSize) {
        this.$message("文件大小不能超过100MB");
        return false;
      }
    },
    //上传成功回调
    handleSuccess(res, file) {
      //后台上传地址
      this.uploading = false;//无论是否成功懒加载都隐藏

      if (res.resultCode == 0) {
        this.$message.success("上传成功");
        this.form.path = res.resultData;
        console.log(res.resultData);
      } else {
        this.$message.error("上传失败，请重新上传");
      }
    },
}

效果图