巧用 Element - UI 实现图片上传按钮的智能隐藏

news2025/4/30 0:34:31

引言

在前端开发中，使用 Element - UI 组件库来构建用户界面是非常常见的操作。其中图片上传功能更是在许多项目中频繁出现，比如用户头像上传、商品图片上传等场景。有时候，我们会有这样的需求：当上传图片达到一定数量后，隐藏图片上传按钮，避免用户继续上传多余图片。今天，我们就来深入探讨如何实现这一功能。

一、准备工作

（一）项目搭建

首先，确保你的项目已经成功引入了 Element - UI 组件库。如果是基于 Vue.js 的项目，可以通过 npm 或 yarn 进行安装：

npm install element-ui -- save
# 或者
yarn add element-ui

然后在项目的入口文件（如main.js）中进行全局注册：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chaldron/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

（二）基本的图片上传组件使用

在 Vue 组件中，我们可以使用el - upload组件来实现图片上传功能。一个简单的示例如下：

<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-url"
    :on-change="handleChange"
    :before-upload="beforeUpload"
    :file-list="fileList"
    list-type="picture - card"
  >
    <i class="el-icon-plus"></i>
    <div slot="file" slot-scope="{ file }">
      <img :src="file.url" alt="" class="el-upload-list__item-thumbnail">
      <span class="el-upload-list__item-actions">
        <span class="el-upload - list__item-preview" @click="handlePictureCardPreview(file)">
          <i class="el-icon-zoom-in"></i>
        </span>
        <span class="el-upload-list__item-delete" @click="handleRemove(file)">
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleChange(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      return true;
    },
    handlePictureCardPreview(file) {
      // 图片预览逻辑
    },
    handleRemove(file, fileList) {
      // 移除图片逻辑
    }
  }
};
</script>

<style scoped>
.upload - demo {
  width: 200px;
}
</style>

这里我们设置了图片上传的地址action，定义了上传前的钩子函数beforeUpload，以及图片变化时的钩子函数handleChange等。

二、实现图片上传按钮的隐藏逻辑

（一）设置上传数量限制

我们可以通过el - upload组件的limit属性来设置允许上传的图片数量。例如，我们将其设置为 3，即最多允许上传 3 张图片：

<el-upload
  class="upload-demo"
  action="/your-upload-url"
  :on-change="handleChange"
  :before-upload="beforeUpload"
  :file-list="fileList"
  list-type="picture-card"
  :limit="3"
>
  <!-- 其他代码不变 -->
</el-upload>

（二）监听上传图片数量并隐藏按钮

为了实现当上传图片达到一定数量后隐藏上传按钮，我们可以通过计算属性或者watch来监听fileList的长度。

  1. 使用计算属性
<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-url"
    :on - change="handleChange"
    :before - upload="beforeUpload"
    :file - list="fileList"
    list - type="picture - card"
    :limit="3"
    :style="{ 'display': canShowUploadButton? 'block' : 'none' }"
  >
    <i class="el-icon-plus"></i>
    <div slot="file" slot-scope="{ file }">
      <img :src="file.url" alt="" class="el-upload-list__item-thumbnail">
      <span class="el-upload-list__item-actions">
        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
          <i class="el-icon-zoom-in"></i>
        </span>
        <span class="el-upload-list__item-delete" @click="handleRemove(file)">
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
  </el - upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  computed: {
    canShowUploadButton() {
      return this.fileList.length < 3;
    }
  },
  methods: {
    handleChange(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      return true;
    },
    handlePictureCardPreview(file) {
      // 图片预览逻辑
    },
    handleRemove(file, fileList) {
      // 移除图片逻辑
    }
  }
};
</script>

在上述代码中，通过计算属性canShowUploadButton来判断fileList的长度是否小于设定的上传数量限制（这里是 3）。如果小于限制数量，则返回true，表示上传按钮可以显示；否则返回false，上传按钮将通过style中的display属性被隐藏。
2. 使用 watch

<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-url"
    :on-change="handleChange"
    :before-upload="beforeUpload"
    :file-list="fileList"
    list-type="picture-card"
    :limit="3"
    :style="{ 'display': uploadButtonDisplay }"
  >
    <i class="el-icon-plus"></i>
    <div slot="file" slot-scope="{ file }">
      <img :src="file.url" alt="" class="el-upload-list__item-thumbnail">
      <span class="el-upload-list__item-actions">
        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
          <i class="el-icon-zoom-in"></i>
        </span>
        <span class="el-upload-list__item-delete" @click="handleRemove(file)">
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      uploadButtonDisplay: 'block'
    };
  },
  watch: {
    fileList: {
      handler(newVal) {
        if (newVal.length >= 3) {
          this.uploadButtonDisplay = 'none';
        } else {
          this.uploadButtonDisplay = 'block';
        }
      },
      deep: true
    }
  },
  methods: {
    handleChange(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      return true;
    },
    handlePictureCardPreview(file) {
      // 图片预览逻辑
    },
    handleRemove(file, fileList) {
      // 移除图片逻辑
    }
  }
};
</script>

这里使用watch来监听fileList的变化，当fileList的长度发生改变时，根据长度是否达到或超过限制数量，动态修改uploadButtonDisplay的值，从而控制上传按钮的显示与隐藏。

三、进一步优化与拓展

（一）提示用户已达上传数量限制

当上传按钮隐藏后，为了给用户更好的提示，我们可以添加一个提示信息，告知用户已经达到上传数量限制。比如，在组件中添加一个el - tooltip：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/your-upload-url"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :file-list="fileList"
      list-type="picture-card"
      :limit="3"
      :style="{ 'display': canShowUploadButton? 'block' : 'none' }"
    >
      <i class="el-icon-plus"></i>
      <div slot="file" slot - scope="{ file }">
        <img :src="file.url" alt="" class="el - upload-list__item-thumbnail">
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-tooltip
      v-if="!canShowUploadButton"
      content="已达到上传数量限制"
      placement="top"
    >
      <i class="el-icon-information-circle"></i>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  computed: {
    canShowUploadButton() {
      return this.fileList.length < 3;
    }
  },
  methods: {
    handleChange(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      return true;
    },
    handlePictureCardPreview(file) {
      // 图片预览逻辑
    },
    handleRemove(file, fileList) {
      // 移除图片逻辑
    }
  }
};
</script>

（二）动态调整上传数量限制

在实际应用中，上传数量限制可能需要根据不同的业务场景动态调整。我们可以将limit属性设置为一个动态绑定的值，比如从父组件传递过来的 props：

<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-url"
    :on-change="handleChange"
    :before-upload="beforeUpload"
    :file-list="fileList"
    list-type="picture-card"
    :limit="uploadLimit"
    :style="{ 'display': canShowUploadButton? 'block' : 'none' }"
  >
    <!-- 其他代码不变 -->
  </el-upload>
</template>

<script>
export default {
  props: {
    uploadLimit: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      fileList: []
    };
  },
  computed: {
    canShowUploadButton() {
      return this.fileList.length < this.uploadLimit;
    }
  },
  methods: {
    handleChange(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      return true;
    },
    handlePictureCardPreview(file) {
      // 图片预览逻辑
    },
    handleRemove(file, fileList) {
      // 移除图片逻辑
    }
  }
};
</script>

这样，父组件就可以根据实际需求传递不同的uploadLimit值，灵活调整上传数量限制。

四、总结

通过上述步骤，我们成功实现了在 Element - UI 中，当图片上传达到一定数量后隐藏上传按钮的功能。同时，我们还对其进行了优化和拓展，提升了用户体验和功能的灵活性。在实际项目开发中，我们可以根据具体业务需求进一步完善相关功能，比如添加更丰富的提示信息、优化图片上传的交互流程等。掌握这些技巧，能让我们在使用 Element - UI 构建应用时，打造出更加友好、高效的用户界面。希望本文能对你有所帮助，让你在前端开发的道路上更进一步。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2344579.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

从“拼凑”到“构建”：大语言模型系统设计指南！

从“拼凑”到“构建”：大语言模型系统设计指南！

你有没有试过在没有说明书的情况下组装宜家家具？那种手忙脚乱却又充满期待的感觉，和设计大语言模型（LLM）系统时如出一辙。如果没有一个清晰的计划，很容易陷入混乱。我曾经也一头扎进去，满心期待却又手足无措，被网上那些复杂的架构图搞得晕头转向。于是，我坐下来，把它们…
阅读更多...
【数据结构与算法】从完全二叉树到堆再到优先队列

【数据结构与算法】从完全二叉树到堆再到优先队列

完全二叉树 CBT 设二叉树的深度为 h , 若非最底层的其他各层的节点数都达到最大个数 , 最底层 h 的所有节点都连续集中在左侧的二叉树叫做 完全二叉树 . 特点 对任意节点 , 其右分支下的叶子节点的最底层为 L , 则其左分支下的叶子节点的最低层一定是 L 或 L 1 .完全二叉树…
阅读更多...
【Linux网络】构建类似XShell功能的TCP服务器

【Linux网络】构建类似XShell功能的TCP服务器

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;博客仓库&#xff1a;https://gitee.com/JohnKingW/linux_test/tree/master/lesson &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &…
阅读更多...
Spring Boot 配置源详解（完整版）

Spring Boot 配置源详解（完整版）

Spring Boot 配置源详解&#xff08;完整版&#xff09; 一、配置源加载顺序与优先级 配置源类型优先级顺序&#xff08;从高到低&#xff09;对应配置类/接口是否可覆盖典型文件/来源命令行参数&#xff08;--keyvalue&#xff09;1&#xff08;最高&#xff09;SimpleComman…
阅读更多...
puppeteer注入浏览器指纹过CDP

puppeteer注入浏览器指纹过CDP

一、背景 通过puppeteer爬取目标网站时&#xff0c;经常会被对方网站检测到&#xff0c;比如原生puppeteerCDP特征非常明显&#xff0c;另外指纹如果一直不变&#xff0c;也会引发风控 二、实现 通过以下几行代码即可轻松过大部分检测点&#xff0c;并且能够切换指纹&#x…
阅读更多...
软件项目实施全流程及交付物清单

软件项目实施全流程及交付物清单

需求分析 -> 概要设计 -> 详细设计 -> 开发实现 -> 测试 -> 部署 -> 运维 一、确认项目目标、范围和团队成员 二、收集和分析客户需求&#xff0c;确定需求规格 三、制定详细的项目计划&#xff0c;包括时间表、资源计划、预算 四、系统架构设计&#xf…
阅读更多...
【2025计算机网络-面试常问】http和https区别是什么，http的内容有哪些，https用的是对称加密还是非对称加密，流程是怎么样的

【2025计算机网络-面试常问】http和https区别是什么，http的内容有哪些，https用的是对称加密还是非对称加密，流程是怎么样的

HTTP与HTTPS全面对比及HTTPS加密流程详解 一、HTTP与HTTPS核心区别 特性HTTPHTTPS协议基础明文传输HTTP SSL/TLS加密层默认端口80443加密方式无加密混合加密&#xff08;非对称对称&#xff09;证书要求不需要需要CA颁发的数字证书安全性易被窃听、篡改、冒充防窃听、防篡改…
阅读更多...
从梯度消失到百层网络：ResNet 是如何改变深度学习成为经典的？

从梯度消失到百层网络：ResNet 是如何改变深度学习成为经典的？

自AlexNet赢得2012年ImageNet竞赛以来&#xff0c;每个新的获胜架构通常都会增加更多层数以降低错误率。一段时间内&#xff0c;增加层数确实有效&#xff0c;但随着网络深度的增加&#xff0c;深度学习中一个常见的问题——梯度消失或梯度爆炸开始出现。 梯度消失问题会导致梯…
阅读更多...
Uni-App 多端电子合同开源项目介绍

Uni-App 多端电子合同开源项目介绍

项目概述 本项目是一款基于 uni-app框架开发的多端电子合同管理平台&#xff0c;旨在为企业及个人用户提供高效、安全、便捷的电子合同签署与管理服务。项目创新性地引入了 “证据链”与“非证据链”两种签署模式&#xff0c;满足不同场景下的签署需求&#xff0c;支持多种签署…
阅读更多...
多语言笔记系列：共享数据

多语言笔记系列：共享数据

在笔记中共享数据(变量) 使用 .NET 交互式内核&#xff0c;可以在单个笔记本中以多种语言编写代码。为了利用每种语言的不同优势&#xff0c;您会发现在它们之间共享数据很有用。即一种语言的变量&#xff0c;可以在其它语言中使用。 默认情况下&#xff0c;.NET Interactive …
阅读更多...
如何使用SeedProd创建无缝的WordPress维护页面

如何使用SeedProd创建无缝的WordPress维护页面

不管您刚接触 WordPress &#xff0c;还是经验丰富的站长&#xff0c;SeedProd 都是创建网站维护页面的得力助手。通过SeedProd&#xff0c;您可以轻松创建一个与网站风格一致、功能齐全的维护页面&#xff0c;让您的用户在网站维护期间也能感受到您的专业与关怀。本文将为您提…
阅读更多...
使用Python设置excel单元格的字体（font值）

使用Python设置excel单元格的字体（font值）

一、前言 通过使用Python的openpyxl库&#xff0c;来操作excel单元格&#xff0c;设置单元格的字体&#xff0c;也就是font值。 把学习的过程分享给大家。大佬勿喷&#xff01; 二、程序展示 1、新建excel import openpyxl from openpyxl.styles import Font wb openpyxl.…
阅读更多...
求解，如何控制三相无刷电机？欢迎到访评论

求解，如何控制三相无刷电机？欢迎到访评论

问题&#xff1a;通过一个集成的TF2104芯片控制H桥上桥臂和下桥臂&#xff0c;如何控制&#xff1f;还是说得需要PWM_UH和PWM_UL分开控制&#xff1f;
阅读更多...
365打卡第R3周: RNN-心脏病预测

365打卡第R3周: RNN-心脏病预测

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客 &#x1f356; 原作者&#xff1a;K同学啊 &#x1f3e1; 我的环境&#xff1a; 语言环境&#xff1a;Python3.10 编译器&#xff1a;Jupyter Lab 深度学习环境&#xff1a;torch2.5.1 torchvision0…
阅读更多...
【实战】基于强化学习的 Agent 训练框架全流程拆解

【实战】基于强化学习的 Agent 训练框架全流程拆解

一、引言 在人工智能蓬勃发展的今天&#xff0c;强化学习&#xff08;Reinforcement Learning, RL&#xff09;作为让智能体&#xff08;Agent&#xff09;在复杂环境中自主学习并做出最优决策的核心技术&#xff0c;正日益受到关注。从游戏领域中击败人类顶尖选手的 AlphaGo&a…
阅读更多...
【音视频】⾳频处理基本概念及⾳频重采样

【音视频】⾳频处理基本概念及⾳频重采样

一、重采样 1.1 什么是重采样 所谓的重采样&#xff0c;就是改变⾳频的采样率、sample format、声道数等参数&#xff0c;使之按照我们期望的参数输出。 1.2 为什么要重采样 为什么要重采样? 当然是原有的⾳频参数不满⾜我们的需求&#xff0c;⽐如在FFmpeg解码⾳频的时候…
阅读更多...
Prompt 结构化提示工程

Prompt 结构化提示工程

Prompt 结构化提示工程 目前ai开发工具都大同小异&#xff0c;随着deepseek的流行&#xff0c;ai工具的能力都差不太多&#xff0c;功能基本都覆盖到了。而prompt能力反而是需要更加关注的&#xff08;说白了就是能不能把需求清晰的输出成文档&#xff09;。因此大家可能需要加…
阅读更多...
Pycharm 代理配置

Pycharm 代理配置

Pycharm 代理配置 文章目录 Pycharm 代理配置1. 设置系统代理1.1 作用范围1.2 使用场景1.3 设置步骤 2. 设置 python 运行/调试代理2.1 作用范围2.2 使用场景2.3 设置步骤 Pycharm 工具作为一款强大的 IDE&#xff0c;其代理配置在实际开发中也是必不可少的&#xff0c;下面介绍…
阅读更多...
Spring Native：GraalVM原生镜像编译与性能优化

Spring Native：GraalVM原生镜像编译与性能优化

文章目录 引言一、Spring Native与GraalVM基础1.1 GraalVM原理与优势1.2 Spring Native架构设计 二、原生镜像编译实践2.1 构建配置与过程2.2 常见问题与解决方案 三、性能优化技巧3.1 内存占用优化3.2 启动时间优化3.3 实践案例分析 总结 引言 微服务架构的普及推动了轻量级、…
阅读更多...
药监平台上传数据报资源码不存在

药监平台上传数据报资源码不存在

问题&#xff1a;电子监管码上传药监平台提示“导入的资源码不存在” 现象&#xff1a;从生产系统导出的关联关系数据包上传到药监平台时显示&#xff1a; 原因&#xff1a;上传数据包的通道的资源码与数据包的资源码不匹配。 解决方法&#xff1a;检查药监平台和生产系统的药…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023