自定义元素如何实现文件拖拽上传的组件封装

自定义元素实现文件拖拽上传组件，核心是继承HTMLElement并封装拖拽事件监听、文件校验、上传逻辑与UI反馈，强调边界清晰、可复用、不侵入业务。

自定义元素（Custom Element）实现文件拖拽上传组件，核心是用 class 继承 HTMLElement，封装拖拽事件监听、文件校验、上传逻辑和 UI 反馈。关键不在“多高级”，而在“边界清晰、可复用、不侵入业务”。

监听拖拽区域的原生事件

拖拽上传依赖 dragenter、dragover、dragleave 和 drop 四个事件。注意：dragover 必须调用 event.preventDefault()，否则浏览器默认行为会阻止 drop 触发。

1. 在 connectedCallback 中绑定事件，避免重复绑定
2. dragenter 和 dragover 时添加高亮样式（比如加边框或背景色），提升交互反馈
3. dragleave 要判断是否真离开了目标区域（可用 event.relatedTarget 或坐标比对）
4. drop 中取 event.dataTransfer.files，过滤掉非文件项（如文本、链接）

封装文件校验与预处理逻辑

上传前校验应可配置：类型、大小、数量。建议把规则作为属性暴露（如 accept="image/*"、max-size="5242880"），并在 drop 后统一执行。

1. 用 File.type 和 accept 值做 MIME 类型匹配（支持 image/*、.pdf 等写法）
2. 单个文件超限时跳过，但保留其他合法文件；全部无效时触发 error 自定义事件
3. 可选支持多图预览：用 URL.createObjectURL(file) 生成临时 URL 渲染缩略图

统一上传流程与状态管理

上传本身交给外部处理（比如传入 upload 方法），组件只负责调用、监听进度、反馈状态。避免硬编码请求逻辑，保持解耦。

1. 提供 upload(fileList) 方法供手动触发，也响应 drop 自动上传
2. 每个文件上传过程 emit upload-start、upload-progress、upload-success、upload-error 事件
3. 内部维护 loading、error、uploadedCount 等状态，通过 attributeChangedCallback 同步到 DOM 属性（如 data-loading）

暴露标准 API 与生命周期钩子

让组件像原生一样好用：支持 disabled、multiple 属性，兼容表单提交，并提供方法重置、清空、重新上传。

1. 响应 disabled 属性变化，禁用拖拽区域和按钮
2. 实现 reset() 方法清空已选文件、重置状态、移除预览图
3. 支持 form 关联：监听 formdata 事件，将文件 append 到 FormData 中
4. 在 disconnectedCallback 中清理事件监听器和 object URLs，防止内存泄漏

不复杂但容易忽略：拖拽事件默认不可取消，上传失败要回退 UI 状态，跨浏览器的 dataTransfer.items 兼容性需降级处理。封装重点不是功能堆砌，而是把“拖→校→传→反馈”这条链路稳稳托住。