需在 dragover 和 dragenter 事件中均调用 Event.preventdefault() 才能触发 drop；读取文件优先用 datatransfer.items.getasfile()，回退时检查 files.Length；预览大图用 createobjecturl 并及时 revoke；上传状态应按文件粒度管理，且需校验 response.ok。
拖拽区域监听不到 dragover 事件？
浏览器默认会阻止 dragover 的默认行为，导致无法触发后续的 drop。不调用 event.preventDefault()，拖拽图标就会变成“禁止”符号，松手也没反应。
- 必须在
dragover和dragenter两个事件里都加event.preventDefault() - 只加
dragover不够——有些浏览器（如 safari）对首次进入区域更依赖dragenter - 避免给整个
document绑定，否则可能干扰其他拖拽逻辑；推荐绑定到明确的容器元素，比如document.getElementById('drop-area')
drop 事件里怎么安全读取文件？
别直接从 event.dataTransfer.files 拿完就走，它不是标准 FileList 的深拷贝，某些场景下（比如跨窗口拖拽）可能为空或失效。
- 优先用
event.dataTransfer.items→getAsFile()，兼容性稍差但更可靠（支持 chrome/firefox/edge 79+） - 回退到
event.dataTransfer.files时，先判断长度：if (files.length === 0) return - 每个
File对象都有name、size、type，但type可被伪造，不能当唯一校验依据
上传前需要预览图片？小心 FileReader 的异步陷阱
FileReader 是纯异步的，循环读多个文件时，闭包容易让所有回调共用最后一个 file 变量。
- 用
for...of或Array.from(files).foreach()替代传统for (let i = 0; ...)，避免作用域污染 - 预览大图时，别直接
readAsDataURL——内存暴涨，改用createObjectURL(file)更轻量 -
createObjectURL生成的 URL 必须手动URL.revokeObjectURL()，否则长期驻留内存（尤其在反复拖拽时）
上传请求失败后 ui 状态怎么同步？
拖拽上传常忽略错误状态还原：用户拖进去了，接口 500 了，但界面上还显示“上传中”，甚至没提示错误。
立即学习“前端免费学习笔记（深入）”；
- 上传用
fetch或XMLhttpRequest都行，但必须显式处理catch和onError - 每个文件建议独立状态（例如用
map存file.uid → { status: 'uploading' | 'success' | 'error' }），别只靠一个全局布尔值 - 网络中断或 CORS 失败时，
fetch不会进catch，得靠response.ok判断 HTTP 状态码
真正难的不是监听拖拽，而是把「用户以为拖进去了」和「浏览器真拿到了」「服务端真收下了」这三层状态对齐。中间任何一环没兜住，体验就断了。