拖拽文件数量限制必须在drop事件中用JavaScript实现，通过event.preventDefault()阻止默认行为，再用Array.from(files).slice(0,5)截取前5个文件，并同步更新UI提示与上传逻辑。
拖拽时 dataTransfer.files 超过 5 个就截断，不是靠 HTML 属性
HTML 的 multiple 属性对拖拽完全无效——它只影响点击 的行为。拖拽进来的文件数量由用户操作系统操作决定（比如 Windows 下按住 Ctrl 拖多个，macOS 用 Cmd），浏览器原生不限制。所以限制必须在 JS 中做，且只能在 drop 事件里干预。
- 监听目标容器的
drop事件，别监听change（它根本不会触发） - 第一时间调用
event.preventDefault()，否则浏览器会打开或下载文件 - 从
event.dataTransfer.files拿到FileList，它是只读类数组，不能直接.splice() - 用
Array.from(files).slice(0, 5)提取前 5 个，丢弃多余项 - 别尝试清空
dataTransfer.files——做不到，也别试图重写它
dragover 里不处理文件，但必须阻止默认行为
很多人在 dragover 里写逻辑，结果发现 drop 时 files 是空的。这是因为没正确阻止默认行为：dragover 不调 preventDefault()，drop 就压根不会触发，更别说读取文件了。
-
dragover唯一该做的事：调event.preventDefault()+ 可选设event.dataTransfer.dropEffect = "copy" - 不要在
dragover里读dataTransfer.files——它此时为空或不可靠 - 不要给
dragover加防抖或校验逻辑，纯属浪费，还可能干扰拖拽反馈 - 移动端（iOS/Android）基本不支持拖放 API，这块逻辑可直接跳过
用 FormData.append() 上传时别漏掉循环和命名
截断后的文件列表要发给后端，不能直接塞进表单提交——拖拽没有 元素，得手动构造 FormData。常见错误是只 append 第一个文件，或者键名没对齐后端预期。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 遍历截断后的文件数组：
for (const file of acceptedFiles) { formData.append("files", file); } - 如果后端要求带索引（如
files[0]、files[1]），就得手动拼键名：formData.append(`files[${i}]`, file) - 别设
Content-Type头——fetch会自动加multipart/form-data边界，设反而出错 - 服务端必须二次校验总数，前端截断可被绕过（比如用 curl 直接发 20 个文件）
用户提示别只靠 alert()，要实时显示已选数
单纯弹窗说“最多 5 个”体验差，用户不知道当前选了多少、删哪个、为什么按钮变灰。UI 同步才是关键。
- 在
drop后立刻更新页面文字，例如：已选 4/5 个文件 - 超限时禁用上传按钮，并把提示文字变成红色，比弹窗更及时
- 允许用户删除已列文件项（从本地数组移除，再重新生成
FormData），而不是强制重拖 - 注意去重：同一文件多次拖入（同名+同大小+同修改时间）应视为重复，避免误占名额
实际限制逻辑不在 HTML 属性里，也不在拖拽视觉反馈中，而是在 drop 事件那一瞬间的数组截断与 UI 同步。最容易被忽略的是：不阻止 dragover 默认行为会导致整个流程静默失败，连错误都看不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
