拖拽后需在dragover和drop事件中均调用e.preventDefault()才能获取dataTransfer.files；读大文件应避免readAsDataURL，优先用readAsText或URL.createObjectURL；分块读取须动态计算末尾位置防丢失；流式读取需检测浏览器兼容性并降级。
拖拽后 dataTransfer.files 拿不到文件？先拦住默认行为
浏览器对拖入文件的默认反应是打开或下载，不阻止就会跳转或报错，根本进不了读取逻辑。关键就两行：dragover 和 drop 事件里都得调用 e.preventDefault()。
常见错误现象：拖进去没反应、页面跳转到文件地址、控制台报 “Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'” —— 其实根本没拿到 File 对象。
-
dragover只需阻止默认行为，就能让drop事件正常触发（很多教程漏掉这步） -
drop里除了preventDefault()，还要记得清掉视觉反馈类名（比如highlight），否则样式会卡住 - 移动端不支持拖放，别在 iOS/Android 上测试这个流程
FileReader 读大文件卡死？别用 readAsDataURL()
直接调 reader.readAsDataURL(file) 会让整个文件转成 base64 字符串塞进内存，10MB 的文本文件可能膨胀到 13MB+，页面瞬间无响应。真实场景下，99% 的文本预览需求用 readAsText() 就够了。
真正该换方案的是超大文件（>50MB）或二进制处理场景：
- 纯文本预览：始终优先用
reader.readAsText(file, 'UTF-8')，指定编码防乱码 - 图片/音视频预览：用
URL.createObjectURL(file)创建临时 URL，直接赋给，不走 FileReader - 需要解析内容（如 CSV、日志分析）：必须分块，用
file.slice(start, end)配合循环读取，避免内存爆炸
怎么分块读取？Blob.slice() 的起始位置容易算错
很多人写 file.slice(i * chunkSize, (i + 1) * chunkSize) 看似合理，但没考虑最后一块可能越界——slice() 超出范围不会报错，而是静默返回空 Blob，导致最后几 KB 丢失。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
正确做法是每次动态算终点：
const chunkSize = 1024 * 1024; // 1MB
let start = 0;
function readChunk() {
if (start >= file.size) return;
const end = Math.min(start + chunkSize, file.size);
const chunk = file.slice(start, end);
reader.readAsText(chunk, 'UTF-8');
start = end;
}
注意点：
-
slice()返回的是Blob，不是File，但FileReader能直接读 - 不要在
onload里立刻调下一次readChunk()，要等当前块加载完成再触发，否则顺序错乱 - 想加进度条？监听
reader.onprogress，它给的是当前 chunk 的加载进度，不是全文件
想流式处理？ReadableStream 不是所有浏览器都认
file.stream() + getReader() 是最干净的流式方案，但 Safari 直到 16.4 才支持，旧版 Edge 完全不支持。生产环境用它前必须降级：
- 先检测
typeof file.stream === 'function'，不支持就切回Blob.slice()分块 -
stream()返回的ReadableStream默认按字节读，value 是Uint8Array，需手动转字符串（new TextDecoder().decode(chunk)） - 流式读取无法获取总大小，所以没法做精确进度条，只能显示“正在处理…”
真正难的不是 API 调用，而是把 chunk 拼接、断点续读、编码容错这些细节兜住。小文件直接 readAsText，大文件分块，超大文件才上流式——别一上来就堆最重的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
