拖拽上传需三事件共存且dragover中必须preventDefault()，否则drop不触发；FileList需转数组再遍历；多文件上传依后端命名；iOS Safari不支持dragover需降级；状态需手动重置。

拖拽上传不是加个 draggable="true" 就能用的，核心卡点在 dragover 里漏掉 preventDefault() —— 这会导致 drop 根本不触发，文件直接被浏览器打开或下载。

为什么 drop 事件死活不执行？

这不是代码写错了，是浏览器根本没把你当“可投放目标”。dragover 事件里没调 event.preventDefault()，浏览器就默认走原生逻辑：图片预览、PDF 打开、文本粘贴……你连 drop 的边都碰不到。

• dragenter 和 drop 里也得调 preventDefault()，但关键防线在 dragover
• dragover 高频触发（每 30–50ms 一次），别在里面做 FileReader 或 DOM 更新，会卡顿
• 只监听 drop 是不够的；必须三者共存：dragenter → dragover → drop

怎么安全读取 dataTransfer.files？

e.dataTransfer.files 是只读的 FileList，不是数组。直接写 files.forEach() 会报 TypeError: files.forEach is not a function。

• 正确转数组方式只有两种：Array.from(files)（推荐，兼容所有现代浏览器）或 [...files]（ES6+）
• 别用 Array.prototype.slice.call(files)，冗长且容易拼错
• 别误以为隐藏的 的 files 属性有值——它永远为空，除非用户真点了那个 input
• 校验类型建议用 file.type.startsWith('image/') 而非硬匹配，兼容 WebP、AVIF 等新格式

上传时 FormData 怎么 append 多文件？

后端接收方式决定前端命名策略。常见错误是统一用 append('file', file)，结果后端只收到最后一个。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 如果后端期望数组形式（如 PHP 的 $_FILES['files']），用 formData.append('files[]', file)
• 如果后端按字段名区分（如 Node.js Koa 的 ctx.request.files.file1），可用 formData.append('file1', file) 动态命名
• 不要手动设 Content-Type 头：fetch 或 XMLHttpRequest 发送 FormData 时会自动加 multipart/form-data; boundary=...，手设反而导致 400
• 大文件（>10MB）建议加 file.size 前置拦截，避免上传中途失败

移动端和降级方案绕不开

iOS / iPadOS Safari 至今（2026 年）仍不支持 dragover 和 dragenter，这不是 bug，是明确平台限制。PC 上测得再稳，真机一拖就失效。

• 必须给拖拽容器加 tabindex="0"，让它可聚焦
• 监听 click 或 keydown（空格/回车），然后触发隐藏 的 .click()
• 别把 套在 里，会劫持事件冒泡；也别依赖 contenteditable="true"
• 视觉反馈要一致：拖入时加 highlight 类，dragleave 里删掉，否则用户松手后还高亮着，体验断裂

最常被忽略的是：拖完一次后，dataTransfer 不会自动清空，重复 drop 可能提交旧文件；drop 处理完最好显式重置状态，比如清空预览区、重置高亮类、清空临时变量。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！