拖拽区域必须同时监听dragover和drop事件，并在二者中均调用event.preventdefault()，否则drop不触发；文件读取应使用event.datatransfer.files，且需校验files.length及type。
拖拽区域怎么监听 dragover 和 drop 事件
浏览器默认会阻止 drop 事件，所以不显式调用 event.preventDefault()，拖拽文件进来会直接跳转或下载，根本不会触发上传逻辑。关键不是“加事件”，而是“阻止默认行为 + 正确识别文件”。
常见错误是只在 drop 里 preventDefault，但忘了 dragover 也得阻止——否则浏览器压根不认为这个区域可投放。
-
dragover事件必须同步调用event.preventDefault()，且不能是异步或条件判断后才执行 -
drop事件中，优先从event.dataTransfer.files取文件，而不是event.target.files（后者为空） - 建议给拖拽区域加
ondragover="event.preventDefault();"行内处理，避免事件绑定时机问题
怎么限制只接受图片且单文件上传
靠前端校验防不了恶意用户，但能提升体验、减少无效请求。重点不是“过滤类型”，而是“提前拒绝非图片/多文件”，避免后续解析失败。
dataTransfer.files 是 FileList，即使用户拖一个文件，它也是长度为 1 的类数组；若拖多个，长度 >1 —— 这比检查 name 后缀更可靠。
- 先判断
files.length !== 1，直接提示“请拖入单张图片” - 再取
files[0].type，匹配/^image\//，比检查.jpg或.png后缀更准（比如用户改后缀但内容非图） - 如果需兼容老旧浏览器（如 IE），可 fallback 到
files[0].name.match(/\.(jpg|jpeg|png|gif)$/i)
如何把 File 对象转成 base64 预览头像
不用发请求也能立刻显示缩略图，核心是 FileReader。但它异步，不能直接 return 结果；很多人卡在“读完了但没更新 DOM”。
注意：readAsDataURL 生成的 base64 字符串很长，用于预览没问题，但别直接存库或传后端——后端通常更想要二进制流或 formData。
- 创建
const reader = new FileReader()后，必须在reader.onload回调里赋值img.src = reader.result - 不要在
onload外访问reader.result，它此时还是undefined - 如果预览图变形，记得给
<img>加style="max-width:90%"
上传到后端时 FormData 怎么构造才不丢文件
常见错误是把 File 对象 JSON.stringify 后当字符串传，或者漏掉 Content-Type: multipart/form-data 的边界设置——其实 fetch / XMLHttpRequest 会自动设好，你只要别手动覆盖。
后端接收字段名（如 avatar）必须和前端 append 的 key 一致，否则拿不到文件。
- 用
const formData = new FormData()，然后formData.append('avatar', file)（第二个参数是File实例，不是路径） - 如果还要传用户 ID 等额外字段，用
formData.append('uid', '123')，别用JSON.stringify - fetch 时直接传
formData，不要设headers里的Content-Type，否则浏览器会删掉 boundary
dragover 阻止、FileList 处理、FileReader 时序、FormData 构造这四点上出错——尤其跨浏览器时，IE 和旧版 Safari 对 dataTransfer.files 支持不一致，真要兼容得单独测。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
