Angular中file类型input点击后不弹出文件选择框如何解决

• 修正事件绑定的非法命名
  你写的(change)="function()"中function是JavaScript保留关键字，不能直接作为绑定的方法名，修改为自定义合法名称即可，示例：
  HTML代码：

<input type="file" (change)="onFileSelected($event)" />

对应的组件TS代码：

onFileSelected(event: Event): void {
  const input = event.target as HTMLInputElement;
  if (input.files?.length) {
    console.log('选中的文件：', input.files[0]);
    // 后续上传逻辑写在这里
  }
}

• 排查元素点击被拦截的问题
  检查input是否被上层元素遮挡，或者父级/自身设置了pointer-events: none属性，可临时给input添加强制样式验证：

<input type="file" (change)="onFileSelected($event)" style="position: relative; z-index: 9999; pointer-events: auto !important;" />

• 检查对应模块是否导入了必要的表单依赖
  如果你的项目使用了Angular表单能力，需要在当前组件所属的NgModule中导入对应模块：模板驱动表单导入FormsModule，响应式表单导入ReactiveFormsModule。
• 排查属性与环境问题
  检查input是否意外添加了disabled、hidden属性，可尝试更换浏览器无痕模式测试是否是扩展插件拦截了文件选择行为。
• 最小可运行验证示例
  你可以先创建一个空白组件直接复制以下代码验证功能是否正常：
  HTML部分：

<div>
  <h2>文件上传测试</h2>
  <input type="file" (change)="onFileSelected($event)" />
  <p *ngIf="selectedFile">已选中文件：{{selectedFile.name}}</p>
</div>

TS部分：

import { Component } from '@angular/core';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
  selectedFile: File | null = null;

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files?.length) {
      this.selectedFile = input.files[0];
      console.log('文件选中成功', this.selectedFile);
    }
  }
}

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