Angular拖拽上传触发drop事件时dataTransfer的files数组为空如何解决

问题修复方案 #

以下是针对drop事件dataTransfer.files为空的直接修复步骤：

1. 补全dragover事件的dropEffect配置
   浏览器默认会禁止外部文件拖入页面放置，仅阻止默认行为不足以让浏览器暴露文件数据，需要明确指定放置行为：

@HostListener('dragover', ['$event']) onDragOver(evt: DragEvent){
  evt.preventDefault();
  evt.stopPropagation();
  // 新增如下配置
  if (evt.dataTransfer) {
    evt.dataTransfer.dropEffect = 'copy';
  }
}

2. 移除不必要的draggable属性配置
   你给放置区域设置的draggable=true是用于让元素本身可被拖拽的属性，和文件放置目标逻辑冲突，直接删除构造函数里的这行代码即可：

// 删除该行代码
this.renderer.setProperty(this.elementRef.nativeElement, 'draggable', true);

3. 补全变量声明避免语法错误
   原代码中files变量未声明，会导致运行时报错，修改为：

const files = evt.dataTransfer?.files;

额外排查点 #

如果完成上述修改后问题依然存在，可以按以下顺序排查：

• 确认拖拽的是本地系统的文件，拖拽浏览器内部资源不会携带files数据
• 检查指令挂载的元素没有被透明层级遮挡，导致drop事件没有被正确触发
• 可以打印evt.dataTransfer.items确认是否有文件条目，如果items有内容但files为空，说明还是dragover阶段的配置没有生效

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