Angular文件拖拽上传功能在Chrome浏览器中无法正常工作

问题原因分析 #

• 缺少dragover事件处理：Chrome浏览器要求必须在dragover事件中调用preventDefault()，否则会触发浏览器默认的文件打开行为，导致drop事件无法正确获取dataTransfer.files。
• 代码变量引用错误：原代码中fileInput.files = dataTransfer.files;里的dataTransfer未定义，应改为引用evt.dataTransfer。
• 文件输入框赋值方式错误：HTMLInputElement.files是只读属性，直接赋值在现代浏览器中不生效，需要通过DataTransfer对象构造新的文件列表。

修正后的完整代码 #

TypeScript组件代码 #

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

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html'
})
export class FileUploadComponent {
  // 监听dragover事件，必须阻止默认行为才能让Chrome正确传递文件
  @HostListener('dragover', ['$event'])
  public onDragOver(evt: DragEvent) {
    evt.preventDefault();
    evt.stopPropagation();
    document.getElementById('dropzone')?.classList.add('hovering');
  }

  // 监听dragleave事件，移除hover状态样式
  @HostListener('dragleave', ['$event'])
  public onDragLeave(evt: DragEvent) {
    evt.preventDefault();
    evt.stopPropagation();
    document.getElementById('dropzone')?.classList.remove('hovering');
  }

  @HostListener('drop', ['$event'])
  public onDrop(evt: DragEvent) {
    evt.preventDefault();
    evt.stopPropagation();
    document.getElementById('dropzone')?.classList.remove('hovering');

    // 判空处理，避免无文件时的错误
    if (!evt.dataTransfer || evt.dataTransfer.files.length === 0) {
      return;
    }

    // 遍历处理拖拽的文件
    const files = Array.from(evt.dataTransfer.files);
    files.forEach(file => {
      // 这里添加自定义文件处理逻辑
      console.log('获取到的文件:', file);
    });

    // 同步文件到隐藏的input元素，更新表单控件
    const fileInput = document.getElementById('form-file-input') as HTMLInputElement;
    if (fileInput) {
      // 利用DataTransfer构造可赋值的FileList（因files属性只读）
      const dataTransfer = new DataTransfer();
      files.forEach(file => dataTransfer.items.add(file));
      fileInput.files = dataTransfer.files;

      // 触发change事件，确保表单控件感知到文件变化
      fileInput.dispatchEvent(new Event('change', { bubbles: true }));
    }
  }
}

HTML模板代码（保持原结构无需修改） #

<div class="dropzone" id="dropzone">
  <label for="form-file-input">Drop files here</label>
</div>

<input
  type="file"
  id="form-file-input"
  name="file"
  class="form-control file-upload"
  [formControl]="formControl"
  [formlyAttributes]="field"
  accept="image/*"
  style="display: none"
/>

关键说明 #

1. dragover事件是核心：只有阻止该事件的默认行为，Chrome才会将拖拽的文件交给业务代码处理，而不是直接打开文件。
2. 只读属性的正确赋值方式：通过DataTransfer对象构造新的文件列表，才能成功给只读的fileInput.files属性赋值。
3. 类型约束优化：将事件类型从any改为DragEvent，可获得更精准的类型提示，避免属性访问错误。

内容的提问来源于stack exchange，提问作者Martijn Vissers