el-upload上传组件，达到上传数量限制时隐藏上传框？

超级无敌小小小白

已于 2023-05-30 09:56:08 修改

阅读量2.9k

点赞数 5

分类专栏： Element-ui 文章标签：前端 javascript html

于 2023-05-26 11:26:38 首次发布

本文链接：https://blog.csdn.net/SM_Cute/article/details/130882821

版权

文章讲述了在前端开发中，使用Vue.js框架实现上传图片功能时，如何在达到限制后隐藏上传框，同时保留查看和删除图标的详细步骤。通过动态绑定class和监听on-remove、on-success事件来控制显示状态。

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

先上图：

测试今天给提了一个建议，想让上传图片达到限制之后就不展示后面的上传框，看了眼官网的例子：

发给他之后让他选一个我照做，可是需求那边又想要既展示查看删除图标（也就是下面的），又想要不展示上传框（也就是上面的），好吧，直接手动改造一下下面照片墙的情况：

看代码：

<!-- 给上传组件绑定一个动态class，用来隐藏上传框 -->

<el-upload
  ref="elUploadTag"
  :action="TagAction"
  :headers="myHeaders"
  :limit="1"
  list-type="picture-card"
  :multiple="false"
  :on-preview="handlePreviewTag"
  :on-remove="doAfterRemovedTag"
  :before-u