我看了你的代码，问题主要出在上传提示区域（.cont）没有根据图片选中状态动态隐藏，另外input的层级和交互逻辑也需要微调。咱们一步步来修复：

核心问题分析 #

你现在只在urls.length > 0时显示图片，但上传提示的.cont元素一直存在，所以即使选中了图片，它还是会和图片重叠显示。另外，input的定位和层级需要确保在上传提示显示时能被点击到。

解决方案代码 #

修改后的HTML

<div class="drop">
  <!-- 只有当没有选中图片时，才显示上传提示 -->
  <div class="cont" *ngIf="urls.length === 0">
    <div class="browse"> Upload files </div>
    <div class="desc"> Click to upload or drop your files </div>
  </div>
  
  <!-- 选中图片后显示预览（这里优化为显示所有选中的图片，你也可以保持只显示第一张） -->
  <ng-container *ngIf="urls.length > 0">
    <div class="image-preview" *ngFor="let url of urls">
      <img [src]="url">
      <span class="delete" style="cursor: pointer;" (click)="deleteImage(url)">X</span>
    </div>
  </ng-container>
  
  <input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
</div>

修改后的CSS

.drop {
  margin-left: 32px;
  width: 928px;
  height: 696px;
  border: 3px dashed #DADFE3;
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  background: white;
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* 上传提示区域：居中显示，设置层级确保在input上方（但input透明不影响点击） */
.drop .cont {
  width: 500px;
  height: 170px;
  color: #8E99A5;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.drop .cont .desc {
  text-align: center;
  font: Regular 16px/19px Montserrat;
  letter-spacing: 0;
  color: #4981C2;
}

.drop .cont .browse {
  margin: 10px 25%;
  padding: 8px 16px;
  border-radius: 16px;
  background: #ECF2F9;
  text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
  color: #4D4F5C;
}

/* 调整input的层级，确保它在最上层但透明，点击提示区域也能触发上传 */
.drop input {
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* 图片预览容器，处理多个图片的显示 */
.image-preview {
  position: relative;
  width: 100%;
  height: 100%;
}

.image-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

.image-preview .delete {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 6px 10px;
  border-radius: 50%;
  font-size: 14px;
}

关键修改点 #

1. 动态控制上传提示的显示：给.cont加上*ngIf="urls.length === 0"，这样只有当没有选中图片时才显示上传按钮和提示文字，选中图片后自动隐藏。
2. 调整z-index层级：让input的z-index比.cont高，确保点击上传提示区域时能触发文件选择框，同时不影响视觉显示。
3. 优化多选图片预览：把单张图片改成循环显示所有选中的图片，还给删除按钮加了半透明背景，提升交互体验（如果你只想显示第一张，去掉*ngFor即可）。

这样修改后，当你选中图片时，上传提示会自动隐藏，只显示图片预览；删除图片后，上传提示又会重新出现，完全符合你的需求。

内容的提问来源于stack exchange，提问作者user11052170