拖拽上传必须同时监听dragover并调用preventDefault()，否则drop不触发；仅监听drop无效。文件读取应使用event.dataTransfer.files，避免items和不存在的getData('Files')。需检查files.length为0，并注意事件绑定泄漏问题。
拖拽上传的核心不是监听 drop，而是必须同时处理 dragover 和 drop，否则浏览器会直接拒收文件——这是 90% 的人卡住的第一步。
为什么 drop 事件不触发？
浏览器默认会阻止 dragover 的默认行为，导致后续的 drop 根本不会发生。这不是 bug，是规范强制要求的安全机制。
- 必须在目标元素上监听
dragover，并在回调中调用event.preventDefault() - 仅监听
drop是无效的，哪怕你写了event.preventDefault()也无济于事 - 推荐同时监听
dragenter（可选），用于高亮提示区域，但不要只靠它来“开启 drop”
drop 里怎么安全读取文件？
event.dataTransfer.files 是唯一可靠来源；event.dataTransfer.items 虽支持目录拖入，但兼容性差（Safari 不支持递归读取），日常上传建议绕开。
- 优先用
event.dataTransfer.files—— 它是FileList，所有浏览器都支持 - 避免用
event.dataTransfer.getData('Files')，这个 API 不存在，纯属混淆 - 检查空文件：如果用户松手位置偏移，
files.length === 0是常见情况，需提前判断 - 示例片段：
element.addEventListener('drop', (e) => { e.preventDefault(); const files = e.dataTransfer.files; if (files.length === 0) return; handleFiles(Array.from(files)); });
如何避免多次绑定或事件泄漏？
拖拽事件容易在组件反复挂载/卸载时重复绑定，尤其在 React/Vue 等框架中——addEventListener 没配对 removeEventListener 就等于内存泄漏。
- 给监听函数命名（不要用箭头函数），才能精准解绑：
el.addEventListener('drop', handleDrop)+el.removeEventListener('drop', handleDrop) - 在单页应用中，务必在组件销毁/离开前清理，比如 React 的
useEffect清理函数、Vue 的beforeUnmount - 别在
document上全局监听drop，除非你真需要全页面响应——它会干扰 iframe 或富文本编辑器等场景
真正难的不是写通逻辑，而是记住：拖拽不是“用户一拖就自动能传”，它是一组协同事件，缺一不可。漏掉 dragover.preventDefault()，后面所有代码都白写。
