拖拽上传核心是监听dragenter、dragover、dragleave、drop四个事件，阻止默认行为并从dataTransfer.files获取文件，配合视觉反馈与校验实现直观定制化上传体验。
用拖拽区域实现文件上传，核心是让一个可视容器具备“接收拖入文件”的能力，而不是依赖隐藏的 <input type="file">。它更直观、体验更好，也更容易定制样式和交互反馈。
1. 创建可拖拽的容器并监听关键事件
拖拽上传不是靠 input 自带行为，而是通过监听四个 HTML5 拖放事件来接管流程：
- dragenter：文件首次进入区域时触发，用于开启高亮状态（如加边框、变背景色）
-
dragover：文件在区域内持续移动时反复触发，必须阻止默认行为（
event.preventDefault()），否则浏览器会尝试打开或下载文件 - dragleave：文件移出区域时触发，用于关闭高亮
-
drop：用户松开鼠标完成拖拽时触发，从
event.dataTransfer.files中提取文件列表
示例模板结构：
@dragenter.prevent="isDragging = true"
@dragover.prevent
@dragleave="isDragging = false"
@drop.prevent="handleDrop">
{{ isDragging ? '松开上传' : '拖拽文件到这里' }}
@dragover.prevent
@dragleave="isDragging = false"
@drop.prevent="handleDrop">
{{ isDragging ? '松开上传' : '拖拽文件到这里' }}
2. 从 drop 事件中安全获取文件
event.dataTransfer.files 是标准 FileList 对象，兼容性好，适用于绝大多数场景（图片、文档、压缩包等）：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 支持多文件一次拖入（无需按住 Ctrl）
- 不支持文件夹（
files里只有文件，不含目录结构） - 若需上传文件夹，请改用
event.dataTransfer.items+webkitGetAsEntry()方案（见延伸说明）
处理逻辑示例：
const handleDrop = (e) => {const droppedFiles = Array.from(e.dataTransfer.files);
if (droppedFiles.length === 0) return;
// 过滤掉非文件项（如文本、链接）
const validFiles = droppedFiles.filter(f => f instanceof File);
uploadFiles(validFiles);
};
3. 添加视觉反馈与基础校验
仅功能可用还不够，用户需要明确知道“是否可拖”“是否已进入”“是否已接收”：
- 用
:class="{ 'active': isDragging }"动态切换拖拽中的样式 - 上传前检查文件数量（如限制 ≤ 100 个）、总大小（如 ≤ 500MB）、类型（如只允许
image/*, .pdf, .xlsx） - 对无效项（如文件夹、空文件、超限文件）给出明确提示，而不是静默忽略
4. 上传执行与后续处理
拿到文件列表后，上传本身和普通文件上传一致：
- 用
FormData.append('file', file)逐个添加（注意字段名唯一性，避免同名覆盖） - 若需保留原始路径（如上传整个项目文件夹），需额外从
items提取fullPath并挂载到 File 实例上 - 推荐配合 axios 或原生 fetch，启用
onUploadProgress实现进度条
上传成功后，建议清空临时状态、重置拖拽样式，并提供操作反馈（如 toast 提示“3 个文件上传完成”）。
