el-upload上传的问题？

Question

上传的时候可以把这个加号给disable吗，加这个防止用户操作报错

代码如下：

<el-upload
  action="#"
  list-type="picture-card"
  :auto-upload="false"
  accept="image/png, image/jpg, image/jpeg"
  :file-list="fileList"
  :on-remove="handleRemove"
  :on-preview="handleCoverpicture"
  :on-change="handleUpUpload"
  ref="uploadFile"
>
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisibleAvatar" append-to-body>
  <img width="100%" :src="dialogVisibleAvatarImg" alt="" />
</el-dialog>

handleUpUpload(file, fileList) {
  const isLt10M = file.size / 1024 / 1024 > 5;
  if (isLt10M) {
    this.$message.error("上传头像图片大小不能超过 5MB!");
    const currIdx = this.fileList.indexOf(file);
    this.fileList.splice(currIdx, 1);
    return;
  }
  this.loading = true;
  this.$message.success("正在上传，请等五秒钟后再上传");
  let params = new FormData();
  params.append("file", file.raw);
  params.append("platform", "pc");
  params.append("folder", "ad");
  getupdateImage(params).then((res) => {
    if (res.code === 0) {
      this.fileList.push({
        url: res.data,
      });
      setTimeout(() => {
        this.loading = false;
      }, 10000);
      this.$emit("onChangImg", this.fileList);
    }
  });
},

期望是上传的过程中把加号给disable掉，等五秒钟后点击加号继续上传

Answer 1

可以的:

在提示弹窗那里加个定时器

handleUpUpload(file, fileList) {
      this.disabled = true
      console.log(12, this.disabled);
      setTimeout(() => {
        this.disabled = false
        console.log(23);
      }, 5000)
  const isLt10M = file.size / 1024 / 1024 > 5;
  if (isLt10M) {
    this.$message.error("上传头像图片大小不能超过 5MB!");
    const currIdx = this.fileList.indexOf(file);
    this.fileList.splice(currIdx, 1);
    return;
  }
  this.loading = true;
  this.$message.success("正在上传，请等五秒钟后再上传");
  let params = new FormData();
  params.append("file", file.raw);
  params.append("platform", "pc");
  params.append("folder", "ad");
  getupdateImage(params).then((res) => {
    if (res.code === 0) {
      this.fileList.push({
        url: res.data,
      });
      setTimeout(() => {
        this.loading = false;
      }, 10000);
      this.$emit("onChangImg", this.fileList);
    }
  });
},