本来是单选上传，接口也是单对单，后来改了需求，要求多选上传，在不让后端改接口的情况下实现了图片的多选上传，主要是on-success是异步提交，无法拿到最后一张上传完成状态，后来换了一种方法实现的。

html部分

<div class="screenFrame">
              <!-- 图片上传 -->
              <div class="screenFrame-top">
                <el-upload
                  ref="upload"
                  accept=".png,.jpg, .jpeg,.bmp,.pjp"
                  action="/api/material/uploadFile.htm"
                  :auto-upload="false"
                  list-type="picture-card"
                  :headers="token"
                  :before-upload="handleBeforeUpload"
                  :on-success="onSuccess"
                  :on-change="changeImagUpload"
                  :file-list="fileList"
                  multiple
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
              <!-- 新增 -->
              <div class="screenFrame-bottom">
                <div class="bottom-right">
                  <span
                    style="font-size: 12px; margin-right: 10px"
                    v-if="showAdd == 1"
                    >(上传中，请稍后)</span
                  >

                  <el-button @click="unAddFile">取消</el-button>
                  <el-button
                    type="primary"
                    @click="AddFile"
                    :disabled="disabledA"
                    >确定上传</el-button
                  >
                </div>
              </div>
            </div>

 css部分

 .screenFrame {
    width: 100%;
    height: 80%;
    margin-top: 10px;
    border: 1px solid rgb(196, 196, 196);
    .screenFrame-top {
      margin: 2% 0 2% 2%;
      height: 500px;
      width: 98%;
      overflow-y: auto;
    }
    .screenFrame-bottom {
      margin: 2% 0;
      height: 22%;
      width: 100%;
      .bottom-left {
        float: left;
        margin: 10px;
        text-align: center;
      }
      .bottom-right {
        float: right;
        margin: 10px;
      }
    }
  }

js部分

 // 图片上传
    uploadImg() {
     //打开弹窗前的判断
      let list = {
        customerId: JSON.parse(localStorage.getItem("login_user")).customerId,
      };
      getCustomerSpaceSize(list).then((res) => {
        if (res.ret_code == 0) {
          this.dialogVisibleA = true;
        } else {
          this.$message.error(res.ret_info);
        }
      });
    },
    // 上传之前
    handleBeforeUpload(file) {
      let list = {
        cid: 101,
        customerId: JSON.parse(localStorage.getItem("login_user")).customerId,
      };
      //判断条件（可忽略）
      getConfig(list).then((res) => {
        this.maxSize = res.ret_data.configValue * 1;
      });
      this.materialImage.materialSize =
        Math.round(file.size / 1024 / 10.24) / 100;
      // 获取图片格式
      let FileInfo = file.name.split(".");
      let fileFormat = FileInfo[FileInfo.length - 1];
      // 图片格式限制
      if (
        fileFormat !== "png" &&
        fileFormat !== "jpeg" &&
        fileFormat !== "jpg" &&
        fileFormat !== "bmp" &&
        fileFormat !== "pjp"
      ) {
        this.$message.error("图片格式检测错误,请重新添加！");
        return false;
      }
      this.materialImage.format = fileFormat;
      return new Promise(async (resolve, reject) => {
        // 失败
        if (
          this.materialImage.materialSize > this.maxSize ||
          this.materialImage.materialSize == this.maxSize
        ) {
          this.$message.error("图片尺寸大小超出限制的部分无法上传！");
          reject();
        } else {
          // 成功
          resolve();
        }
      });
    },
    //change事件获取到所有待上传图片，主要是为了拿到length 
    changeImagUpload(file, fileList) {
      this.fileList = fileList;
    },
    // 上传成功之后，调用添加接口
    onSuccess(file, val) {
      this.disabledA = true;
      this.materialImage.materialUrl = file.ret_data;
      let picName = val.name.split(".");
      let name = picName[picName.length - 2];
      this.materialImage.materialName = name;
      // 获取上传时间（实时时间）
      var date = new Date();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      // 格式化时间格式
      var currentDate =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        strDate +
        " " +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds();
      this.materialImage.uploadTime = currentDate;
      this.materialImage.materialSize =
        Math.round(val.size / 1024 / 10.24) / 100;
      this.materialImage.type = 0;
      // 判断分组（可忽略）
      if (
        this.selectInline.region == "默认分组" ||
        this.selectInline.region == 0
      ) {
        this.groupId = 1;
      } else {
        let currentData = this.selectGroupList.find((item) => {
          return item.id === this.selectInline.region;
        });
        this.groupId = currentData.id;
      }
      this.materialImage.groupId = this.groupId;
      this.materialImage.customerId = JSON.parse(
        localStorage.getItem("login_user")
      ).customerId;
      addMaterial(this.materialImage).then((res) => {
        if (res.ret_code == 0) {
          this.successSize++;
          //接口是单张上传，后来改需求要多张上传，这里因为异步问题，是判断最后一张上传成功才会触发成功事件，否则会有导致奇怪的bug
          if (this.fileList.length == this.successSize) {
            this.successSize = 0;
            this.showAdd = 0;
            this.disabledA = false;
            this.dialogVisibleA = false;
            this.$refs.upload.clearFiles();
            this.getMaterialList();
          }
        } else {
          this.$message.error("添加失败！");
          this.dialogVisibleA = true;
        }
      });
    },
    // 上传取消
    unAddFile() {
      this.dialogVisibleA = false;
      this.$refs.upload.abort();
    },
    // 上传完成
    AddFile() {
      this.showAdd = 1;
      this.$refs.upload.submit();
    },