elementUi upload上传达到limit后隐藏upload图标

最新推荐文章于 2025-06-16 14:55:05 发布

蓝清水

最新推荐文章于 2025-06-16 14:55:05 发布

阅读量3.1k

点赞数 3

CC 4.0 BY-SA版权

文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/lrbtony/article/details/131665147

文章讲述了在项目中使用elementUi的el-upload组件来实现上传控件，限制最多只能上传3张图片。当达到限制时，自动隐藏上传按钮；删除照片后，按钮重新显示。为解决删除动画导致的显示问题，采取了在删除操作中加入1秒延迟的方法来同步更新界面状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如题所述，我们项目要求上传控件最大只允许上传3张。当数量达到的时候，自动隐藏上传按钮控件。而当点击删除之前的照片后，又重新显示上传按钮控件。

这里我们选用了饿了么的elementUi里的el-upload控件作为基础，再添加我们的需求。

主要的templete如下

<el-upload
          ref="uploadRef"
          action="fakeaction"
          :http-request="uploadFile"
          :class="attachmentArray.length >= 3 ? 'hide' : 'show'"
          list-type="picture-card"
          :before-upload="beforeAttachmentUpload"
          :auto-upload="true"
          :limit="limit"
          :on-exceed="handleExceed"
          accept=".jpg,.png,.jpeg"
          >
            <div slot="file" class="upload-item" slot-scope="{file}">
                <div class="upload-img-wrapper">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" @click="handlePictureCardPreview(file)">
                </div>
                <i @click="handleRemove(file)" class="delete-icon"></i>
            </div>
        </el-upload>

而对应的style如下

.hide   {
  position: relative;
  float: left;
  padding-top: 20px;
  padding-left: 23px;
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }

    .el-upload-list__item {
      border: 0;
      border-radius: 0;
      margin:0 30px 0 0;
    }
  }
}

但是光这样子设置呢，会有些许瑕疵，因为控件本身有删除动画时长，进而使得先出现了第四个按钮，再等删除动画完成后，重新显示了三个控件。

所以，我们就必须在删除操作里，给个响应时长。

 handleRemove(file) {
      // console.log(file);
      const index = this.$refs.uploadRef.uploadFiles.findIndex(e => e.uid === file.uid);
      this.$refs.uploadRef.uploadFiles.splice(index, 1);
      setTimeout(() => {
        this.attachmentArray.splice(index,1);
      }, 1000);
      // console.log(this.attachmentArray,"attachmentArray");
    },

这样子才能完美显示/隐藏按钮。