Element-UI上传组件：上传后隐藏按钮但更换图片不显示按钮问题

问题描述 #

已实现上传图片后隐藏上传按钮的功能，但移除现有图片后，添加新图片时上传按钮无法显示。

问题原因 #

on-change事件会在文件添加、移除、状态变更时触发，当前代码里handleChange不管触发场景直接把upLoadHide设为true，导致移除图片时，on-change会覆盖handleRemove里的false设置，按钮始终处于隐藏状态。

解决方案 #

修改状态控制逻辑，根据当前文件列表的长度动态控制按钮显示/隐藏，有两种实现方式：

方式1：优化handleChange逻辑

利用on-change事件返回的fileList参数判断当前文件数量，动态设置upLoadHide：

/* 样式保留不变 */
.hide .el-upload {
  display: none;
}

<!-- 模板代码保留不变 -->
<el-upload
  class="w-2d5 upload-box"
  :class="{hide:upLoadHide}"
  action=""
  accept=".png,.jpg,.jpeg"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :http-request="customUpload"
  :file-list="fileList"
  list-type="picture-card"
  :limit="1"
  :on-change="handleChange"
>
  <div>
    <el-icon><Plus /></el-icon>
  </div>
</el-upload>

const handleChange = (file, fileList) => {
  // 根据当前文件列表长度判断是否隐藏按钮
  upLoadHide.value = fileList.length >= 1;
}

const handleRemove = () => {
  // 仅保留移除相关业务逻辑即可，无需再修改upLoadHide
}

方式2：监听fileList变化（更推荐）

通过监听fileList的变化自动同步按钮状态，无需依赖on-change事件：

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

<el-upload
  class="w-2d5 upload-box"
  :class="{hide:upLoadHide}"
  action=""
  accept=".png,.jpg,.jpeg"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :http-request="customUpload"
  :file-list="fileList"
  list-type="picture-card"
  :limit="1"
>
  <div>
    <el-icon><Plus /></el-icon>
  </div>
</el-upload>

import { watch } from 'vue';

// 监听fileList变化，自动控制按钮显示/隐藏
watch(fileList, (newFileList) => {
  upLoadHide.value = newFileList.length >= 1;
}, { immediate: true }) // immediate: true 确保初始化时就执行一次

const handleRemove = () => {
  // 移除相关业务逻辑
}

说明 #

方式2更可靠，因为它直接监听数据源fileList的变化，不管是上传、移除还是其他操作导致文件列表变更，按钮状态都会自动同步，避免了事件触发顺序带来的问题。

内容的提问来源于stack exchange，提问作者沈靖甫