手写拖拽 上传文件组件

class FileUploader {
  constructor(uploadAreaId, onUpload) {
    this.uploadArea = document.getElementById(uploadAreaId);
    this.fileInput = document.getElementById('file-input');
    this.onUpload = onUpload;

    this.init();
  }

  init() {
    // 点击上传区域触发文件选择框
    this.uploadArea.addEventListener('click', () => {
      this.fileInput.click();
    });

    // 监听文件选择框的 change 事件
    this.fileInput.addEventListener('change', () => {
      this.handleFiles(this.fileInput.files);
    });

    // 拖拽相关事件
    this.uploadArea.addEventListener('dragover', (e) => {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'copy';
    });

    this.uploadArea.addEventListener('drop', (e) => {
      e.preventDefault();
      this.handleFiles(e.dataTransfer.files);
    });
  }

  handleFiles(files) {
    if (files.length > 0) {
      this.onUpload(files);
    }
  }
}