Drag API 文件拖拽上传需按 dragenter→dragover→drop→dragleave 事件流处理，dragover 必须调用 preventDefault()，Safari 更严格；文件须从 event.dataTransfer.files 获取并校验长度；上传用 FormData + fetch，注意 Safari 进度事件兼容性及安卓 WebView 的 dataTransfer.items 支持问题；需添加视觉反馈、加载状态、错误提示和文件大小/数量限制。
理解 Drag API 的核心事件流
文件拖拽上传不是简单监听 drop 事件就完事。整个链路依赖四个关键事件：dragenter、dragover、drop 和（可选）dragleave。其中 dragover 必须调用 event.preventDefault()，否则浏览器会执行默认行为（如打开文件），导致 drop 无法触发。这个细节在 Chrome、Firefox、Edge 中一致，但 Safari 对 dragover 的处理更严格，漏掉 preventDefault 就会失败。
正确读取拖入的文件对象
在 drop 事件中，不能直接从 event.target.files 获取文件——那是表单 input 的行为。必须通过 event.dataTransfer.files 访问，它返回一个 FileList 对象。注意：FileList 是只读类数组，不支持 map/filter，可用 Array.from() 转为数组再处理。同时建议校验 files.length > 0，避免空拖拽误触发。
构建兼容的上传请求
现代浏览器都支持 FormData + fetch，无需 jQuery 或 iframe 降级。将每个 File 实例 append 到 FormData，再用 fetch 发送到后端接口。关键兼容点有二：一是 Safari 15.4+ 才完整支持 fetch 上传大文件时的进度事件，旧版需 fallback 到 XMLHttpRequest；二是部分安卓 WebView 对 dataTransfer.items 支持不全，优先用 files 而非 items 获取文件。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
增强用户体验的关键细节
仅实现功能远远不够。拖拽区域应有视觉反馈：在 dragenter 和 dragover 时添加高亮边框或背景色，dragleave 时移除；drop 后立即禁用按钮并显示 loading 状态；上传失败要捕获 fetch 的 network error 和后端返回的 4xx/5xx，并给出明确提示（如“文件过大”“网络异常”）。另外，建议限制拖入文件数量和单个大小（例如 ≤ 100MB），前端校验后提前拦截，减少无效请求。
立即学习“前端免费学习笔记（深入）”；
