HTML网页文件拖拽上传核心是确保“浏览器拿到、JS读到、服务端收到”三步贯通；需同时在dragover和dragenter中preventDefault()，优先用dataTransfer.items.getAsFile()读文件，预览用createObjectURL()并及时revoke，上传状态按文件粒度管理。
HTML网页文件拖拽上传，核心不是“能拖”，而是“拖进去之后浏览器真拿到了、JS真读到了、服务端真收下了”——这三步里任何一步断掉，用户就卡在“松手没反应”或“上传中…然后消失”的状态里。
dragover 和 dragenter 都得 preventDefault()
只在 dragover 里调 e.preventDefault() 是不够的。Safari 和部分旧版 Edge 会在首次进入区域时依赖 dragenter 判断是否允许投放；漏掉它，光标变禁止符号，drop 根本不触发。
- 必须同时监听两个事件并都调用
preventDefault() - 别绑定到
document，用明确容器，比如document.getElementById('drop-area') -
dragover是高频事件，里面只做preventDefault()，别塞 DOM 操作或计算逻辑
读文件优先用 dataTransfer.items.getAsFile()
event.dataTransfer.files 看似方便，但它是弱引用快照，跨窗口或快速多次拖拽时可能为空或失效；dataTransfer.items 更可靠，且支持类型过滤。
- 推荐写法：
const file = e.dataTransfer.items[0]?.getAsFile()（先取第一项再转 File） - 回退方案：若
items不可用（如 IE），再 fallback 到files[0]，但务必先判断files.length > 0 -
file.type可被伪造，校验文件类型要结合后端 MIME 检查或前端二进制头识别（如file.slice(0, 4).arrayBuffer()）
预览大图别用 readAsDataURL，用 createObjectURL()
readAsDataURL 会把整个文件转成 base64 字符串，10MB 图片直接吃掉几十 MB 内存；而 createObjectURL() 只是生成一个指向内存中 Blob 的引用链接，轻量得多。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用法：
const url = URL.createObjectURL(file)，然后赋给 - 关键：每次生成后，必须在不需要时手动清理，否则内存泄漏 ——
URL.revokeObjectURL(url) - 清理时机：比如用户换了一批新文件、组件卸载、或预览框关闭时
上传失败状态必须按文件粒度管理
用一个全局 isUploading 开关，掩盖了真实问题：某个文件 500 了，另一个卡在 pending，UI 却显示“全部完成”。用户根本不知道哪错了。
- 建议用
Map存状态：uploadStatus.set(file.uid, { status: 'error', message: 'Network timeout' }) - fetch 上传后，必须检查
response.ok，不能只靠catch—— HTTP 错误码（如 400/500）不会进catch - 网络中断、CORS 失败等场景下，
fetch可能既不 resolve 也不 reject，需加AbortController控制超时
真正难的不是监听 drop，而是把「用户以为拖进去了」和「浏览器真拿到了」「服务端真收下了」这三层状态对齐。中间任何一环没兜住，体验就断了——尤其是 revokeObjectURL 忘了调、status map 没清空、或者 dragenter 事件压根没绑上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
