drop事件不触发主因是dragover未调用preventDefault()；files是唯一可靠文件入口；预览大图用URL.createObjectURL并及时revoke；上传用FormData.append直接传File对象。

drop 事件不触发？大概率是 dragover 没调 preventDefault() —— 这不是可选项，是硬性前提。

为什么绑了 drop 却没反应

浏览器默认把拖进来的文件当链接或资源处理：图片直接打开、文本显示内容、PDF 触发下载。它根本不会把控制权交给你，除非你明确告诉它“别动”。dragover 就是这个“许可开关”。

• dragover 不调 e.preventDefault()，drop 永远不会触发（连回调都不会进）
• drop 里也得调 e.preventDefault()，否则松手瞬间页面可能跳转到文件 URI
• 别监听 document 或 body——目标元素必须是实际接收拖拽的容器（比如一个
  ），否则事件可能被父级截断或冒泡丢失
• 移动端 Safari 直到 iOS 16.4 才支持 dataTransfer.files，iOS 16.3 及更早版本会静默失败，需降级为点击上传

dataTransfer.files 怎么安全取文件

别碰 items 或 types，它们不稳定、兼容差、类型判断绕；files 是唯一可靠入口，返回标准 FileList，和 一致。

• files 是只读类数组，要用 Array.from(files) 转成真数组才能 map/forEach
• file.path 在所有现代浏览器中都为空字符串或报错——这是安全限制，别试图读取真实路径
• 可用属性只有：file.name、file.size、file.type（MIME 类型，可能为空）、file.lastModified
• file.type 可伪造，前端校验仅作体验优化，后端必须重新解析二进制头

怎么预览图片又不卡死页面

大图用 URL.createObjectURL(file)，小图或需编辑时才用 FileReader.readAsDataURL()。前者不走内存拷贝，后者生成 base64 字符串，10MB 图片就可能撑爆主线程。


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 用完记得清理：URL.revokeObjectURL(url)，尤其在移除预览或切换文件时
• 预览前务必检查 file.size，例如限制 ≤20MB：if (file.size > 20 * 1024 * 1024)
• MIME 类型判断别写死：file.type === 'image/jpeg' 会漏掉 png/webp；改用 file.type.startsWith('image/')
• 不要在 dragover 回调里做任何 DOM 操作或耗时计算——它每秒触发几十次，拖拽会明显卡顿

上传前怎么构造合法请求

直接把 File 对象塞进 FormData，交给 fetch 或 XMLHttpRequest 发送即可。浏览器会自动设置 Content-Type: multipart/form-data; boundary=...，手动设反而容易出错。

• formData.append('file', file) 传单个文件；formData.append('files', file, file.name) 可指定服务端接收字段名和原始文件名
• 多文件上传别拼成一个 blob，保持独立 append，方便后端按序处理或分片
• 如果目标容器是 ，别直接在 上监听——加一层 position: relative + 绝对定位
  捕获事件，避免表格布局被拖拽干扰
• 使用框架（Vue/React）时，确保事件绑定在真实 DOM 上，而不是虚拟节点；React 中要用 ref + useEffect 挂载监听器

真正难的不是写几行事件监听，而是理解 dragover 的“闸门”角色、files 的沙箱边界、以及 object URL 的生命周期管理——这些地方一漏，功能就断在用户看不见的地方。