ng2-file-upload拖拽上传正常，点击选择无File对象问题

我在基于Angular 7、使用ng-file-upload的旧项目中实现多图片上传功能，现有单图上传运行正常，多图上传逻辑和单图一致，但出现异常：拖拽文件时，fileDropped方法打印的$event是File对象；点击选择文件时，$event只是不含File的原生事件对象（示例：isTrusted: true、bubbles: true等）。确定是简单实现问题，但不知道从哪调试，求排查方向。

相关代码如下：

模板代码 #

<div ng2FileDrop class="file-drop-sm" 
  [uploader]="fileUploader"
  [ngClass]="{'hover': hasAnotherDropZoneOver}"
  (onFileDrop)="fileDropped($event)" 
  (fileOver)="fileOver($event)"
>
...
<input id="bulkUploader" 
  value="null" type="file" ng2FileSelect [uploader]="fileUploader"
  accept="{{allowedFileTypes}}"
  (change)="fileDropped($event);" 
  style="display:none"
  [multiple]="isMultiple" 
/>

组件代码 #

public async fileDropped($event) {
  console.log($event); // 拖拽返回File，点击选择返回事件对象。
...
}

排查方向 #

• 修正input的事件绑定：ng2FileSelect组件封装的文件选择事件是(onFileSelected)，不是原生的(change)。把input上的(change)="fileDropped($event)"改成(onFileSelected)="fileDropped($event)"，这样就能拿到ng-file-upload处理后的File对象数组。
• 验证多文件模式是否生效：确认isMultiple变量的实际值是否为true，可以先直接写死multiple="multiple"测试，排除变量赋值错误的问题。
• 检查uploader配置：确保fileUploader实例的allowMultiple属性设为true，同时isHTML5为true（ng-file-upload默认是true，但旧项目可能有修改）。
• 对比单图上传代码：既然单图功能正常，把单图上传的input事件绑定、uploader配置和多图的逐一对比，找出差异点，比如单图是不是用了onFileSelected而非change事件。

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