必须在dragover和drop事件中均调用event.preventdefault()，否则浏览器将文件拖拽视为导航行为导致datatransfer.files为空；优先使用files获取文件，items适用于混合内容场景；上传时用formdata.append并处理中文文件名与大文件分片。
HTML 原生拖拽（drag/drop）完全兼容文件上传，但直接监听 drop 事件拿不到文件内容——关键在阻止默认行为并从 event.dataTransfer.files 正确提取。
为什么拖拽后 event.dataTransfer.files 是空的？
这是最常踩的坑：浏览器默认会把拖入的文件当作「导航行为」处理（比如拖一个图片到窗口，会直接跳转打开）。一旦触发页面跳转或刷新，dataTransfer 就被清空了。
- 必须在
dragover和drop事件中都调用event.preventDefault() -
dragover还要返回false或设置event.dataTransfer.dropEffect = 'copy'，否则拖拽光标显示「禁止」图标，用户根本拖不进来 - 只在
drop里 preventDefault 是不够的——dragover不拦截，事件链就断了
dataTransfer.files 和 dataTransfer.items 有什么区别？
files 是 FileList，只含真实文件；items 是 DataTransferItemList，可能包含文件、文本、URL 等多种类型，且支持异步读取（比如粘贴的富文本片段）。
- 纯文件上传场景，优先用
event.dataTransfer.files—— 简单、兼容性好（IE10+）、无需额外解析 - 需要支持粘贴截图（如 macOS 截图后 Cmd+V）、或混合拖入文件+文本时，才用
items遍历判断item.kind === 'file'再item.getAsFile() -
items在 Safari 旧版本和部分移动端 WebView 中行为不一致，别无脑替换files
如何安全地把拖拽文件传给后端？
拿到 File 对象后，不能直接 JSON.stringify 或塞进 FormData 就完事——要注意文件名编码、大文件分片、取消上传等现实问题。
- 用
new FormData()+append('file', file)最稳妥，自动处理 MIME 类型和边界符 - 如果文件名含中文或特殊字符（如
测试-报告.pdf），服务端需明确声明Content-Disposition的filename*参数，否则可能乱码；前端可先用encodeURIComponent(file.name)做 fallback - 单个文件超 100MB？别一次性发——
file.slice()分块 + 服务端合并，同时监听upload.onprogress和upload.onabort - 记得加
input[type="file"]作为降级入口，iOS Safari 拖拽 API 支持不稳定，且微信内置浏览器对drop事件有拦截
真正难的不是拖拽本身，而是拖入瞬间的兼容判断：是否是文件？是否被浏览器劫持为导航？是否在 WebView 里失效？这些边界情况没覆盖，用户拖十次有八次没反应，比没写拖拽还伤体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
