Chrome下Angular使用input type=file时event.target始终为null的问题解决

问题场景 #

我在个人项目中实现了图片上传功能，采用常规HTML/JavaScript结合Angular的处理逻辑：

• 使用<input type="file" />元素选择文件，通过(change)事件将事件传递给Angular函数；该input通过CSSdisplay: none;隐藏，同时添加Angular模板引用#file，由样式化按钮触发它的点击事件
• 在Angular处理函数中通过event.target.files[0]获取选中的文件
• 后续处理文件类型校验等上传逻辑

这套逻辑在Firefox、Safari中正常运行，但在Chrome浏览器中始终出现报错：

ERROR TypeError: Cannot read properties of null (reading 'files')

尝试添加setTimeout延迟获取文件也无法解决问题。

问题根源排查 #

经排查发现，问题出在DOM结构上：我把<input type="file" />放在了mat-menu组件内部。当菜单关闭时，该input元素会被从DOM树中移除，而Chromium内核的浏览器（如Chrome）在这种场景下会将事件的event.target置为null，导致无法读取files属性。

解决方法 #

将<input type="file" />元素移到DOM树中始终存在的位置（比如组件根节点下，而非mat-menu内部），样式化按钮仍然通过模板引用#file调用click()方法触发文件选择，即可在所有浏览器中正常完成上传流程。

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