vue 3可通过webkitdirectory属性或datatransfer.items递归读取文件夹实现拖拽上传，需用filesystementry判断类型并遍历，firefox支持有限，推荐chrome/edge，上传时应保留fullpath并校验文件数量与大小。
Vue 3 中原生不支持直接拖拽上传整个文件夹（尤其是嵌套子文件夹），但可通过 webkitdirectory 属性或 dataTransfer.items 遍历目录条目，结合浏览器对 FileSystemDirectoryEntry 的支持来实现多层级文件夹拖拽上传。关键在于正确读取目录结构并递归提取所有文件。
启用文件夹拖拽的 HTML 元素设置
需要在 <input type="file"> 或拖拽区域中显式允许目录选择：
- 使用
webkitdirectory（Chrome/Safari/Edge）属性可快速支持单文件夹选择（非拖拽），例如：<input type="file" webkitdirectory directory multiple> - 若需真正拖拽整个文件夹（含子目录），必须监听
drop事件，并处理event.dataTransfer.items—— 它可能包含FileSystemEntry对象（kind === "directory"） - 注意：Firefox 不支持
webkitdirectory，且对dataTransfer.items中目录项的支持有限（仅部分版本支持getAsEntry()）；实际项目中建议标注“Chrome/Edge 推荐”
递归读取拖入的文件夹内容
当用户拖入一个文件夹时，items 中每个 item 可能是文件或目录。需用 item.webkitGetAsEntry() 获取 FileSystemEntry，再判断类型并递归遍历：
- 对
FileSystemFileEntry，直接调用file(callback)获取File实例 - 对
FileSystemDirectoryEntry，调用createReader().readEntries()获取子项，再逐个递归处理 - 推荐封装为 Promise 工具函数，避免回调地狱，例如：
async function traverseEntry(entry, path = "") { ... } - 路径信息可保留在
File对象上（如通过Object.assign(file, { fullPath })），便于后端还原目录结构
上传逻辑与后端配合要点
浏览器中拿到的是扁平化的 File 列表（含完整路径），上传时需考虑是否保留目录层级：
- 若后端支持 ZIP 打包：前端可用
JSZip在浏览器内将文件按路径生成 ZIP Blob，一次性上传 - 若后端支持分片+路径参数：每个
File单独上传，同时携带relativePath字段（如"project/src/main.js"） - 避免直接用
FormData.append("files", file)多次添加同名文件（如多个index.html），应确保字段名唯一或服务端能识别路径 - 建议上传前校验文件总数和总大小（例如限制最多 1000 个文件、总容量 ≤ 2GB），防止卡死 UI
基础拖拽区域 + Vue 3 组合式 API 示例
以下为最小可行交互逻辑（省略样式和错误处理）：
const files = ref([]); // 存储所有最终 File 实例（含 fullPath）
const handleDrop = async (e) => {
e.preventDefault();
const items = Array.from(e.dataTransfer.items);
const allFiles = [];
for (const item of items) {
const entry = item.webkitGetAsEntry?.();
if (!entry) continue;
await traverseEntry(entry).then(files => allFiles.push(...files));
}
files.value = allFiles;
};
// 上传时：
const uploadAll = () => {
const formData = new FormData();
files.value.forEach(file => {
formData.append("files", file, file.fullPath || file.name);
});
// 发起 axios/fetch 请求...
};
不复杂但容易忽略路径兼容性和浏览器差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
