当前位置：首页 > article >正文

element plus 使用 upload 组件达到上传数量限制时隐藏上传按钮

article 2025/1/14 2:08:29

最近在重构项目，使用了 element plus UI框架，有个功能是实现图片上传，且限制只能上传一张图片，结果，发现，可以限制只上传一张图片，但是上传按钮还在，如图：

解决办法：当上传个数达到限定个数时，通过样式控制上传按钮的隐藏
主要代码：

:class="{ 'hideUploadBtn': fileList.length >= count }"

:deep(.hideUploadBtn .el-upload--picture-card) {

display: none;

}

详细代码如下：

<template>
  <div>
    <el-upload
      list-type="picture-card"
      :show-file-list="true"
      :before-upload="beforeUpload"
      :multiple="count === 1 ? false : true"
      :file-list="fileList"
      :class="{ 'hideUploadBtn': fileList.length >= count }"
    >
     <el-icon><Plus /></el-icon>
    </el-upload>
  </div>
</template>

<script setup>
const fileList = ref([]); // 文件列表
const count = ref(1); // 限定只能上传一张

const beforeUpload = async (file) => {
  uploadFunc()
  return false; // 阻止默认上传
};

// 你的上传方法
function uploadFunc() {
   // 在这里调用后台接口上传
}
</script>
<style lang="scss" scoped>
:deep(.hideUploadBtn .el-upload--picture-card) {
  display: none;
}
</style>

实现结果如图：