拖拽上传需监听dragover和drop事件并调用preventDefault()和stopPropagation()；用FormData+fetch上传，自动处理Content-Type；多文件应串行或限并发上传；须校验文件、解析响应、完善错误处理与用户反馈。
拖拽区域怎么监听 drop 事件并阻止默认行为
浏览器默认会把拖进来的文件当成链接或图片打开，必须显式调用 event.preventDefault() 才能拿到文件数据。只监听 drop 不够，还得同步处理 dragover（否则 drop 根本不会触发）。
- 给目标容器绑定
dragover和drop事件，两者都必须调用preventDefault() -
drop事件的event.dataTransfer.files是FileList，可直接遍历上传 - 别漏掉
event.stopPropagation()，避免父级元素意外捕获事件
怎么用 FormData + fetch 上传单个文件
FormData 是最稳妥的上传方式，兼容性好、自动设置 Content-Type: multipart/form-data，且支持进度监听。不要手动拼接 boundary 或构造二进制体。
- 创建
const formData = new FormData()，再用formData.append('file', file)添加文件 - fetch 的
body直接传formData，不用设headers—— 浏览器会自动生成正确的Content-Type及 boundary - 如果后端要求字段名不是
file（比如upload），改append第一个参数即可
fetch('/api/upload', {
method: 'POST',
body: formData
})
拖拽多个文件时怎么避免并发失控
用户一次拖入 20 个文件，如果全用 Promise.all 并发上传，可能触发浏览器连接数限制或服务端限流，导致失败或超时。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
for...of串行上传更可控：for (const file of files) { await uploadOne(file) } - 如需并发控制（比如最多 3 个同时上传），用
Promise.allSettled+ 滑动窗口，别用Promise.all - 每个文件上传前检查
file.size，过滤掉空文件或超大文件（如 > 500MB），避免卡住整个队列
为什么上传后页面没反应，但 Network 面板显示 200
常见原因是后端返回的是 HTML 页面（比如登录跳转页）或 JSON 格式错误，而前端没做响应体解析和错误判断。
立即学习“前端免费学习笔记（深入）”；
- fetch 后必须显式调用
response.json()或response.text()，否则 Promise 不会 resolve - 检查
response.ok，不要只看 status === 200 —— 有些服务端对校验失败返回 400 却不设 status - 如果后端返回纯文本（如
"success"），用response.text()，别强行json()，否则抛Unexpected token错误
