Angular拖拽指令异常：文件名后缀被添加额外字符问题求助

云上老周

2026-7-14

Angular Chrome拖拽文件偶发文件名异常修复方案

问题现象

在Angular中使用拖拽指令时，Chrome浏览器偶发以下异常：

evt.dataTransfer.files[0]?.name 返回 undefined
文件名被篡改，例如 image1.jpeg 变为 image1.jpeg0:-9:478:21（末尾478:21固定，前几位数字可变）
Firefox浏览器无此问题。

问题原因

Chrome的拖拽事件机制中，dataTransfer 对象的生命周期可能与事件处理异步冲突，导致其内部的File实例被意外修改；另外未正确阻止拖拽过程中的浏览器默认行为，也可能干扰数据的正确性。

修复方案

1. 完整处理拖拽相关事件

除了drop事件，还需处理dragenter和dragover事件，阻止默认行为和冒泡，避免浏览器触发默认文件操作。

2. 克隆File对象避免原数据被篡改

由于dataTransfer.files是只读的FileList，但底层引用可能被后续操作修改，因此需要手动克隆每个File实例，保留原始文件名等属性。

修改后的代码示例

@HostListener('dragenter', ['$event'])
@HostListener('dragover', ['$event'])
public onDragOver(evt: DragEvent) {
  evt.preventDefault();
  evt.stopPropagation();
}

@HostListener('drop', ['$event']) public onDrop(evt: DragEvent){
  evt.preventDefault();
  evt.stopPropagation();

  const files = Array.from(evt.dataTransfer?.files || []);
  // 克隆File对象，保留原始文件名
  const validFiles: File[] = files.map(file => 
    new File([file], file.name, { type: file.type, lastModified: file.lastModified })
  );

  console.log(validFiles[0]?.name); // 现在能稳定获取正确文件名
  this.filesChangeEmiter.emit(validFiles);
}