如何让input[type=file]内position:absolute图标可点击且不触发上传弹窗

可以通过CSS实现需求，问题根源在于<label>标签默认会将内部所有点击事件透传给关联的隐藏文件输入框，你之前的pointer-events层级设置反了，修改如下即可解决：

调整CSS代码 #

.upload-btn {
    /* 保留原有属性，新增以下规则 */
    pointer-events: none;
}

.upload-btn .upload-text {
    /* 保留原有属性，新增以下规则 */
    pointer-events: all;
    cursor: pointer;
}

/* 原有其他CSS属性保持不变 */
.upload-btn .upload-delete i {
    /* 保留原有属性，新增以下规则优化交互 */
    cursor: pointer;
}

如果需要点击上传图标区域也能触发上传，可将原.upload-btn的背景图抽成独立的子div元素放在容器内，给该div也添加pointer-events: all属性即可。

Angular侧绑定删除事件 #

修改HTML中垃圾桶图标部分，绑定Angular点击事件：

<i class="bi bi-trash" (click)="deleteLogo()"></i>

在对应组件ts文件中编写删除逻辑即可，点击垃圾桶时不会再触发文件上传弹窗。

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