必须在dragover事件中调用e.preventDefault()，否则drop不会触发；文件需从event.dataTransfer.files获取，而非event.target.files。
dragover 事件必须阻止默认行为，否则 drop 不会触发
浏览器对拖拽到页面区域有默认处理（比如打开文件），不阻止就会直接跳转或下载，drop 事件根本不会执行。关键不是“监听了没”，而是“有没有在 dragover 里调用 e.preventDefault()”。
常见错误：只给 drop 加监听，漏掉 dragover 或忘了 preventDefault；或者只在 drop 里阻止，这已经晚了。
- 必须同时监听
dragover和drop -
dragover回调中必须写e.preventDefault()（且不能只靠return false） - 建议顺带监听
dragenter做视觉反馈（比如加高亮边框），但非必需
从 event.dataTransfer.files 拿文件，不是 event.target.files
event.target 是你拖拽释放的目标元素（比如一个 div），它没有 files 属性。files 只在 input[type="file"] 元素上原生存在，而拖拽上传得从 event.dataTransfer.files 取。
这个对象是 FileList 类型，和 的 files 一致，可直接传给 FormData 或用 FileReader 读取。
-
event.dataTransfer.files是只读的，不能手动添加或修改 - 支持多文件拖拽，
files.length > 1就说明用户一次拖了多个 - 注意：
dataTransfer.items是更底层的 API（支持目录拖入），但兼容性和使用复杂度更高，普通文件上传用files足够
drop 事件里别直接读 file.content，先校验类型和大小
用户可能拖进任意文件，包括空文件、超大文件、不支持的格式。等 FileReader 开始读再报错，体验很差。
应该在 drop 回调开头就做轻量级检查：
- 用
file.type或file.name.split('.').pop().toLowerCase()判断扩展名（注意：type可被伪造，仅作初步过滤） - 用
file.size拦截超限文件（比如限制单个 ≤ 50MB：if (file.size > 50 * 1024 * 1024)） - 避免对
files数组循环时直接调用readAsText—— 大文件会卡 UI，应节流或改用分片上传逻辑
移动端不支持原生 drag/drop，得降级为点击选择
iOS Safari 和大部分安卓 WebView 完全不触发 dragstart/drop 等事件，哪怕监听了也收不到。这不是 bug，是规范限制 —— 移动端没有“鼠标拖拽”这一交互范式。
别浪费时间调试移动端拖拽，正确做法是：
- 用
if ('ontouchstart' in window)或matchMedia('(pointer: coarse)').matches检测是否为触屏设备 - 触屏环境下隐藏拖拽区域，只显示一个
按钮，并用 CSS 视觉模拟“上传区” - 桌面端启用拖拽逻辑，移动端自动 fallback，两者共存不冲突
最常被忽略的是 dragover 的 preventDefault 缺失，以及误以为 event.target.files 存在。这两个点卡住的人最多 —— 其他逻辑都跑不通，不是代码写错了，是连事件都没进来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
