dragevent本身不上传文件，仅提供filelist；必须手动调用fetch或xmlhttprequest上传，且dragover中必须调用preventdefault()，否则drop事件不会触发。
DragEvent 本身不上传文件，它只帮你拿到 FileList；真正触发上传必须手动调用 fetch 或 XMLHttpRequest，且需处理好拖拽区域判定、粘贴兼容和取消默认行为——漏掉任一环节都会导致“拖了没反应”。
为什么 dragover 事件里必须调用 preventDefault()
浏览器默认会阻止非链接/非可编辑元素上的拖放操作，不加 preventDefault()，drop 根本不会触发。这不是可选优化，是硬性前提。
- 只在
dragover中调用，dragenter和drop里不需要重复调用 - 不能只监听
drop就完事——没dragover的拦截，drop永远收不到 - 如果区域是
contenteditable或input，默认行为可能不同，建议统一用event.preventDefault()+event.stopPropagation()
如何从 DropEvent 安全提取文件（避开常见陷阱）
event.dataTransfer.files 是唯一可靠来源，event.dataTransfer.items 虽然支持目录读取，但兼容性和权限限制多，线上工具应优先用 files。
-
event.dataTransfer.files是FileList，不是数组，要用Array.from()或展开语法转成数组才能.map() - 检查长度：
if (!event.dataTransfer.files.length) return，避免空拖放报错 - 过滤非文件项：某些系统（如 macOS）拖拽文件夹时可能带
application/x-moz-file类型，但files里已自动过滤，无需额外判断 - 不要依赖
event.dataTransfer.types判定是否为文件——它不可靠，尤其在跨应用拖拽时
怎么让拖拽区响应更自然（含粘贴支持）
用户常会顺手 Ctrl+V 粘贴截图或剪贴板里的图片，只做拖拽支持体验断层。把 paste 事件和拖拽逻辑复用能显著提升直觉感。
- 监听
paste事件，在event.clipboardData.items中遍历查找type.startsWith('image/')的Blob - 对粘贴的图片，用
new File([blob], 'pasted.png', { type: blob.type })包装成标准File对象，后续上传流程完全复用 - 拖拽进入时加临时 class（如
is-drag-over），配合 CSS 实现视觉反馈；但注意在dragleave中清除——别忘了该事件不保证总触发，建议加防抖 + 定时器兜底 - 移动端不支持
drag系列事件，得 fallback 到点击<input type="file">，别试图强行模拟
最易被忽略的是 drop 后的 UI 状态重置：用户连续拖两次，第二次可能因前一次的 class 或 loading 状态未清而卡住；还有大文件拖入后没做 size 校验就发请求，结果后端直接 413 —— 这些都不是 DragEvent 的问题，但全发生在你用它的那一秒之后。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
