Vue 3 文件夹批量上传需用 webkitdirectory 和 directory 属性触发文件夹选择，通过 webkitRelativePath 还原层级结构，再以 FormData 批量提交或分片上传，并配合进度管理与错误重试。
Vue 3 中实现文件夹批量上传，核心在于利用浏览器原生的 webkitdirectory 属性配合 input[type="file"]，再结合递归遍历目录结构、统一组织文件路径信息，最后通过 FormData 或分片逻辑提交到后端。它不是“选中多个文件”的简单扩展，而是要保留层级关系并正确处理子目录中的所有文件。
启用文件夹选择功能
关键是在 标签中添加 webkitdirectory（Chrome/Safari/Edge 支持）和 directory（Firefox 支持）属性，并设置 multiple：
- 注意：该 input 不会触发传统文件选择框的“文件”标签页，而是直接弹出“选择文件夹”对话框（仅限桌面端）
- 用户只能选中一个文件夹，但其内所有文件（含子目录下）都会被一次性读取进
event.target.files
解析文件路径与层级结构
原生 FileList 对象不直接暴露完整路径（出于安全限制），但可通过 webkitRelativePath 获取相对路径（如 "project/src/main.js"）。这是还原文件夹结构的关键字段：
python-flask-vue-creator
下载
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。
- 遍历
event.target.files，对每个File实例提取.webkitRelativePath - 若为空字符串，说明是根目录下的文件；否则按斜杠分割可还原目录层级
- 建议将每个文件封装为对象：
{ file, path: file.webkitRelativePath || file.name }，便于后续构造 FormData 或分片请求
构建上传数据并发送请求
有两种主流方式适配后端接收逻辑：
-
单次 FormData 批量提交：适用于中小规模（如几百个文件以内）。循环追加
formData.append('files', file, relativePath)，其中第三个参数可指定服务端接收时的文件名（含路径），后端需能解析嵌套路径 -
递归 + 分片上传（推荐大文件/深层结构）：先用
FileReader或Blob.slice()拆分大文件；再按目录分组，逐个文件或分片发起请求；同时在请求头或 query 中携带folder=xxx或path=xxx告知服务端保存位置 - 示例 axios 配置片段：
target: '/api/upload-folder', query: { folder: 'user-project' }, headers: { 'X-Upload-Mode': 'folder' }
前端状态管理与用户体验
文件夹上传涉及大量文件，必须提供清晰反馈：
- 实时展示已扫描文件数、总大小、当前上传进度条（可用
Promise.allSettled+ 进度计数器实现） - 支持取消全部或单个文件上传（需 AbortController 控制每个请求）
- 上传失败时保留错误文件列表，并允许重试（避免整批重传）
- 使用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
