拖拽区域必须监听 dragover 和 drop 事件并调用 preventDefault()，否则 drop 不触发；文件列表取自 event.dataTransfer.files，读取需用 FileReader.readAsDataURL() 并在 onload 中获取 result。
拖拽区域必须监听哪些事件才能捕获文件
只监听 dragdrop 是不够的，浏览器默认会打开文件（比如图片跳转到新页），必须同时拦截 dragover 和 drop，并调用 preventDefault()。否则拖进来的文件根本不会触发后续读取逻辑。
关键点：
-
dragover事件必须阻止默认行为，否则drop不会触发 -
drop事件的event.dataTransfer.files才是真正的文件列表 - 不要依赖
event.target.files（那是 input[type=file] 的行为）
FileReader.readAsDataURL() 是唯一可靠路径
不能用 Buffer、ArrayBuffer 手动拼接 Base64 字符串——编码规则（如换行、填充）容易出错，且不同浏览器对二进制转 Base64 的兼容性不一。直接走 FileReader.readAsDataURL() 最稳妥，它返回的字符串形如 "data:image/png;base64,iVBORw0KGgo..."，开头带 MIME 类型，开箱即用。
注意：
立即学习“前端免费学习笔记（深入）”；
- 该方法异步执行，必须在
onload回调里取reader.result - 如果文件很大，
readAsDataURL会一次性加载进内存，可能卡顿；大文件建议改用readAsArrayBuffer+ 分块处理（但这就不是纯 Base64 了） - 不支持直接读取文件夹，
dataTransfer.items中的webkitGetAsEntry()属于非标准 API，Chrome 以外基本不可靠
实际代码中容易漏掉的边界情况
用户可能一次拖多个文件、拖无效项（比如网页文字、链接）、或中途取消拖拽。这些都会导致 dataTransfer.files.length === 0 或 files[0] 为 undefined。
推荐写法片段：
const dropArea = document.getElementById('drop');
dropArea.addEventListener('dragover', e => e.preventDefault());
dropArea.addEventListener('drop', e => {
e.preventDefault();
const files = e.dataTransfer.files;
if (files.length === 0) return; // 拖的不是文件
const file = files[0];
if (!file.type) return; // 某些系统可能传入无 type 的文件
const reader = new FileReader();
reader.onload = () => {
console.log(reader.result); // data:xxx;base64,...
};
reader.readAsDataURL(file);
});移动端和 Safari 的现实限制
iOS Safari 和大部分安卓 WebView **不支持** dragover/drop 事件，拖拽功能在这里完全不可用。如果你需要覆盖移动场景，必须降级为点击 <input type="file">，再用同样逻辑处理 change 事件里的 files。
另外，Safari 对 dataTransfer.items 的支持比 dataTransfer.files 更弱，别试图用 items 做类型过滤——老老实实用 files[0].type 或后缀名判断更稳。
Base64 字符串本身没有兼容性问题，但它的体积比原始文件大约增加 33%，上传前记得评估后端是否接受、前端内存是否扛得住。
