上传图片的数量大于1之后隐藏上传的图标，有点问题可以帮我找一下吗？

Question

当点击上传图片的时候上传图片数量大于1的之后隐藏上传图标

<template>
  <el-upload action="#" list-type="picture-card" :auto-upload="false" drag :class="{ disabled: uploadDisabled }"
    :file-list="goodsimage" :limit="1" :before-upload="handleBeforeUpload">
    <el-icon>
      <Plus />
    </el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
      </div>
    </template>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const goodsimage = ref([])   // 文件以数组的形式存储 已上传图片的数组
const uploadDisabled = ref(false)
// 隐藏图片上传按钮
// const uploadDisabled = () => {
//   return this.uploadDisabled = goodsimage.value.length > 0   //判断图片上传的数量动态控制按钮隐藏与显示
// }
const handleBeforeUpload = () => {
  if (goodsimage.value.length === 1) {
    const uploadBtn = document.querySelector('.disabled') as HTMLElement;
    if (uploadBtn) {
      uploadBtn.style.display = 'none';
    }
  }
}
</script>

<style>
.disabled {
  display: none;
}
</style>
<!-- :class="{ disabled: uploadDisabled }
类名disabled 依赖于数据uploadDisabled 当其为true的时候，div 会拥有类名 disabled
-->
> 
> 
> 
```javascript

> 

```

Answer 1

该回答引用自GPT-3.5,由博主GISer Liu编写：

问题描述中提到了需要在上传图片数量大于1时隐藏上传图标，你已经尝试了一些方法，但似乎出现了一些问题。接下来，我会提供一种解决方案，以解决你的问题。

首先，我们需要确保上传按钮在上传图片数量达到限制时隐藏。你可以通过监听文件列表的变化来实现这一点。当文件列表的长度达到限制时，我们将上传按钮隐藏起来。

<template>
  <el-upload
    action="#"
    list-type="picture-card"
    :auto-upload="false"
    drag
    :class="{ disabled: uploadDisabled }"
    :file-list="goodsimage"
    :limit="1"
    :before-upload="handleBeforeUpload"
  >
    <el-icon>
      <Plus />
    </el-icon>
    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
      </div>
    </template>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const goodsimage = ref([])
const uploadDisabled = ref(false)

const handleBeforeUpload = (file: File) => {
  // 处理上传前逻辑
  // 返回 false 以阻止上传
}

// 监听文件列表变化，控制上传按钮隐藏
const watchGoodsImage = () => {
  if (goodsimage.value.length >= 1) {
    uploadDisabled.value = true
  } else {
    uploadDisabled.value = false
  }
}

watch(() => goodsimage.value.length, watchGoodsImage)
</script>

<style>
.disabled {
  display: none;
}
</style>

这段代码中，我们通过 watch 监听 goodsimage 的长度变化，当其长度达到限制时，将 uploadDisabled 设置为 true，这样就可以隐藏上传按钮了。

请确保将代码放置在正确的位置，并根据需要进行调整。希望这个解决方案能够帮助到你。

如果该回答解决了您的问题，请采纳！如果没有，请参考以下方案进行修订