拖拽文件后需在drop事件中阻止默认行为，从event.dataTransfer.files获取FileList，用file.arrayBuffer()等异步读取二进制数据，避免直接调用未等待Promise的方法。
拖拽文件后怎么拿到二进制数据
拖拽进浏览器的文件不会自动上传或保存，必须手动读取 File 对象。关键在 drop 事件中阻止默认行为，并从 event.dataTransfer.files 取出 FileList——它不是数组，但可用 [...files] 展开。
常见错误是直接对 files[0] 调用 .text() 或 .arrayBuffer() 却没等 Promise 完成，导致后续逻辑拿不到内容。
- 必须用
FileReader或file.arrayBuffer()（推荐）异步读取 -
file.name、file.type、file.size可同步访问，无需等待 - 大文件（如 >100MB）避免一次性读入内存，可考虑分片或流式处理
临时存到内存还是 IndexedDB
“暂存”不等于写磁盘，浏览器里最轻量的临时存储就是 JavaScript 变量（内存），适合单次会话、小文件（
如果需要跨操作保留（比如拖进来→编辑→再拖一个→合并），就得持久化到 sessionStorage 或 IndexedDB。但注意：sessionStorage 只支持字符串，二进制得转 base64 或用 JSON.stringify({ name, data: arrayBuffer }) 会失败——ArrayBuffer 不能直接序列化。
立即学习“前端免费学习笔记（深入）”；
- 内存暂存：用
const tempFiles = []存{ file, buffer }对象，最简单 - IndexedDB 暂存：用
idb库或原生 API，把ArrayBuffer当值存，支持大文件和结构化查询 - 别用
localStorage：有 5–10MB 限制，且阻塞主线程
拖拽区域监听怎么写才不漏事件
只监听 drop 不够。用户可能先拖进页面再悬停、中途取消、或拖到子元素上触发目标偏移。必须同时处理 dragover（仅阻止默认行为，否则 drop 不触发）和 dragleave（用于 UI 反馈）。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
容易踩的坑是给错误元素加监听，比如只绑在 div#drop-area 上，但用户拖到其子 p 或 img 上时，event.target 变成子元素，导致 drop 事件没被捕捉。
- 监听整个
document或根容器，用event.preventDefault()在dragover中 - 检查
event.target是否在目标区域内，用element.contains(event.target) - 避免在
dragenter里做重操作（如预览），它可能高频触发
预览图片或解析文本的即时反馈怎么做
用户拖完立刻看到缩略图或内容，能显著提升体验。图片走 URL.createObjectURL(file) 最快，生成临时 blob URL；文本则需先读成字符串再插入 pre 或 textarea。
注意 createObjectURL 创建的 URL 必须手动 URL.revokeObjectURL() 释放，否则内存泄漏——尤其频繁拖拽时。
- 图片预览：
const url = URL.createObjectURL(file); img.src = url;，之后在销毁前调URL.revokeObjectURL(url) - 文本预览：用
file.text().then(txt => { textarea.value = txt })，比FileReader更简洁 - CSV/JSON 等结构化文本，可在
.text()后用try/catch解析，失败则当纯文本显示
真正麻烦的是多文件 + 大文件 + 需要校验（类型、大小、重复名）+ 页面不刷新的组合场景。这时候光靠内存变量容易失控，得设计缓存键、生命周期管理和清理钩子——但多数情况，老老实实用一个 tempFiles 数组，配合预览和撤销按钮，已经够用。
