html拖拽上传需在dragenter和dragover中均调用preventdefault()以阻止浏览器默认行为，否则drop不触发；文件须从event.datatransfer.files获取filelist，直接append至formdata，移动端不支持该方案。
HTML拖拽本身不兼容文件上传，必须手动阻止默认行为并接管文件读取逻辑，否则浏览器会直接打开或下载文件。
dragover 事件里不调用 event.preventDefault() 就根本没戏
浏览器对拖入文件有强默认行为：松手就打开 PDF、预览图片、下载压缩包。只要 dragover 里没写 event.preventDefault()，drop 事件压根不会触发——你连文件影子都摸不到。
- 只在
drop里阻止默认行为是无效的，那时已经晚了 - 推荐同时监听
dragenter和dragover并都调用preventDefault()，尤其 Safari 对dragenter更敏感 - 别绑定到
document全局，容易干扰其他拖拽组件（比如表格排序、画布元素移动） - 目标容器必须有明确宽高和非
overflow: hidden的父级，否则拖拽阴影不显示、松手无响应
event.dataTransfer.files 是唯一靠谱的文件来源
别碰 event.dataTransfer.items 或 types——items 在 Safari 里 getAsFile() 可能返回 null，types 只是 MIME 字符串列表，没法读内容。
-
event.dataTransfer.files返回标准FileList，和<input type="file">的files完全一致 - 但要注意：它不是深拷贝，跨窗口拖拽时可能为空，建议先判空：
if (!files.length) return - 每个
File对象有name、size、type，但type可被伪造，仅作前端体验校验，不能替代后端检查
FormData.append() 直接传 File 对象，别转 blob 或 base64
常见误区是用 FileReader 把 File 转成 base64 再塞进 FormData，这既浪费内存又拖慢上传——FormData.append() 原生支持 File 实例。
- 单文件：
formData.append('file', files[0]) - 多文件批量上传：
for (const file of files) formData.append('files', file) - 如果后端要求数组字段名如
files[0]，得手动拼字符串：formData.append(`files[${i}]`, file)，FormData不自动解析方括号语法 - 发请求时别设
Content-Type头，fetch会自动生成带boundary的multipart/form-data
移动端不支持原生拖拽，这个方案纯桌面端有效
所有主流移动浏览器（iOS Safari、Chrome for Android）都不触发 dragover/drop 事件。试图在手机上“拖文件进网页”只会失败。
- 不要给移动端加兜底逻辑（比如监听
touchstart模拟拖拽），它违背交互直觉且不可靠 - 真要覆盖移动端，老实用
<input type="file">+ 样式隐藏 + 点击触发 - Electron 环境需额外确认
webPreferences.dragDrop是否启用，否则整个 API 被禁用
真正卡住人的从来不是怎么写那几行 addEventListener，而是搞不清「浏览器拦在哪一步」「文件到底从哪来」「为什么松手没反应」——这些细节错一个，整个拖拽上传就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
