Element-UI 上传图片到达一定数量后隐藏图片上传按钮

最新推荐文章于 2025-01-11 17:00:40 发布

原创最新推荐文章于 2025-01-11 17:00:40 发布 · 3.6k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #js

本文详细介绍了如何在Element-UI的后台管理系统中优化上传图片组件。通过添加自定义class和监听on-change事件，实现当上传图片达到上限时，自动隐藏上传框；反之则显示。代码示例清晰展示了如何使用Vue的data属性和方法来控制上传组件的显示与隐藏。

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

在做后台管理系统的时候，发现element-ui的上传图片在达到上限的时候，后面的上传按钮和上传框不会隐藏，效果图如下：

在这里插入图片描述

现在要改成达到上限，隐藏上传框，未达到上限，显示上传框

首先通过浏览器找到了这个上传图片按钮的class名称为 .el-upload–picture-card，然后给组件绑定一个class名，并且要给该组件添加on-change属性(on-change属性就是文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用)

 <el-form-item label="功能icon" prop="iconInside">
            <el-upload
              class="upload-demo"
              :action="imgUpload"
              :limit="1"
              :file-list="imageUrl"
              list-type="picture-card"
              :on-success="uploadSuccess"
              :on-exceed="handleExceed"
              :before-upload="beforeAvatarUpload"
              :on-remove="handleRemove"
              :on-error="uploadError"
              :on-change="handleEditChange"
              :class="{hide:hideUploadEdit}"
              :disabled="isAble">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">40px*40px,支持JPG、JPEG、PNG格式,小于50kb</div>
            </el-upload>
          </el-form-item>

设置hideUploadEdit的初始值

 data() {
      return {
          hideUploadEdit:false，
      }
 }

on-change 事件，当照片个数是达到上限，hideUpload 为true，并且向上传组件组件添加一个名为hide的class名

handleEditChange(file, fileList) {
        let vm = this
        vm.hideUploadEdit = fileList.length >= 1
      },

当照片要删除的时候，与on-change事件一样，对照片个数进行判断

handleRemove(file, fileList) {
        let vm = this
        vm.hideUploadEdit = fileList.length >= 1
      },

css代码

.hide .el-upload--picture-card {
    display: none;
  }

.hide .el-upload–picture-card {
display: none;
}