拖拽上传需监听dragover、drop等事件并阻止默认行为，用datatransfer.files获取文件，转数组后校验类型大小数量，通过formdata上传；ios/webview不支持时须降级为隐藏file input。
拖拽区域的 DOM 结构和基础事件监听怎么写
核心是监听 dragover、drop 和可选的 dragenter/dragleave，但必须阻止默认行为，否则浏览器会直接打开文件或导航离开页面。
常见错误：只监听 drop 却没处理 dragover，导致拖入时出现“禁止”图标，根本无法释放文件。
-
dragover事件里必须调用e.preventDefault()，否则拖拽无效 -
drop事件中从e.dataTransfer.files取文件列表，不是e.target.files - 建议给目标区域加
outline: none和临时高亮样式（比如border: 2px dashed #007bff），提升反馈感
如何从 dataTransfer 正确读取文件并校验
e.dataTransfer.files 是 FileList 对象，不是数组，不能直接用 map 或展开语法；需转成数组再操作。上传前应检查类型、大小、数量，避免后端拒收或前端卡顿。
容易踩的坑：用 file.type 判断图片？不可靠——空文件或重命名过的文件可能返回空字符串；更稳妥的是用 file.name.split('.').pop().toLowerCase() 匹配后缀，或读取文件头（需 FileReader）。
- 限制单次最多 5 个文件：
if (files.length > 5) { alert('最多上传 5 个文件'); return; } - 检查总大小（例如不超过 100MB）：
Array.from(files).reduce((sum, f) => sum + f.size, 0) > 100 * 1024 * 1024 - 过滤非文件项（如拖入文件夹、网页链接）：
Array.from(files).filter(f => f instanceof File)
怎么把拖进来的文件发给后端（含 FormData 和 fetch 示例）
不能直接把 FileList 传给 fetch，得包装进 FormData。注意字段名要和后端约定一致（比如后端期望 files[] 或 upload），否则拿不到数据。
性能提示：大文件上传建议加 onprogress（用 XMLHttpRequest）或使用 fetch 配合 ReadableStream 分块（较复杂），普通场景用 FormData 足够。
- 构建表单：
const formData = new FormData(); Array.from(files).forEach(f => formData.append('files', f)); - 发送请求：
fetch('/api/upload', { method: 'POST', body: formData }) - 后端若要求 JSON 格式，不能直接传
FormData，得先转成 base64（不推荐，内存爆炸）或改用分块上传方案
为什么拖拽上传在 iOS 或某些安卓 WebView 里不工作
iOS Safari 和很多安卓 WebView 默认禁用 dragover/drop，即使写了事件监听也无响应。这不是代码 bug，是平台限制。
真实场景下，必须提供降级方案：保留传统 <input type="file"> 按钮，并用 CSS 隐藏或覆盖在拖拽区下方，确保点击区域仍可用。不要依赖纯拖拽作为唯一入口。
- 用
display: none隐藏原生 input，再用 label 关联它实现“点击拖拽区即触发选择” - 检测是否支持拖拽：
'draggable' in document.createElement('span')不够准，更可靠的是监听一次dragover是否被触发 - 微信内置浏览器等环境，
input[type=file]可能仅支持拍照/相册，不支持文件管理器，需提前告知用户
拖拽上传看似简单，真正上线时最常出问题的不是逻辑，而是跨平台兼容性、文件校验粒度、以及没准备 fallback 的 input —— 这些地方一漏，用户就卡在第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
