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

原创

已于 2023-05-30 09:56:08 修改 · 3.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

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

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

先上图：

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

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

看代码：

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

<el-upload
  ref="elUploadTag"
  :action="TagAction"
  :headers="myHeaders"
  :limit="1"
  list-type="picture-card"
  :multiple="false"
  :on-preview="handlePreviewTag"
  :on-remove="doAfterRemovedTag"
  :before-upload="doBeforeUploadTag"
  :on-exceed="onExceedTag"
  :on-success="doAfterUploadTag"
  :file-list="fileListTag"
  :class="li