如何使用Node.js上传文件夹并完整保留原有目录结构？

目录结构丢失的核心原因 #

在input上加webkitdirectory、mozdirectory属性本身是可以正常触发文件夹选择能力的：现代浏览器在用户选定文件夹后，会自动为遍历到的每个文件对象挂载webkitRelativePath属性，存储从用户选中的根文件夹开始、到文件本身的完整相对路径。比如用户选中名为我的存档的根文件夹，内部嵌套的设置/画质.json文件，对应的路径值就是我的存档/设置/画质.json。
现有实现完全没有读取和使用这个路径属性，直接把文件的原始文件名作为存储名，所有文件统一写入uploads根目录，自然会出现所有文件堆在同一层级、目录结构完全丢失的问题，同名文件还会互相覆盖。另外现有后端代码中的decompress函数没有提前导入和定义，运行到对应逻辑时会直接抛出错误。

行业内通用的两类实现方案 #

免压缩、原生保留目录结构上传 #

不需要用户提前手动压缩，基于现有单/多文件上传逻辑改造即可落地：

• 保留现有input的webkitdirectory、mozdirectory、multiple属性，不需要调整表单基础结构
• 原生表单提交不会自动把webkitRelativePath信息传递给后端，需要在上传阶段把每个文件对应的相对路径元数据同步携带到请求中：可通过手动构建FormData的方式附加路径信息，或者在multer的文件处理钩子中将路径信息映射到请求上下文
• 后端修改multer存储配置：根据每个文件携带的相对路径，递归创建对应层级的服务端目录，再把文件写入对应路径，完整还原前端的目录结构
• 可补充上传前的体积校验、文件类型校验逻辑，避免用户误传超大目录或者违规文件

压缩包上传+服务端自动解压 #

这是大体积资源上传场景下的主流实现方案，核心优势是传输效率高、目录结构还原准确：

• 前端增加操作引导，提示用户可将需要上传的文件夹压缩为zip格式后上传，全程不需要用户手动执行解压操作
• 后端接收到zip文件后，通过解压库自动将压缩包内的完整目录结构释放到指定存储目录下
• 常见落地踩坑点：解压时需要做路径穿越安全校验、递归创建所有缺失的上级目录、等待解压流程完全结束后再向前端返回响应，避免出现解压不完整的问题

方案选型参考 #

• 面向玩家上传游戏存档、本地配置这类小体积、文件数量少的场景，优先选择免压缩的原生目录上传方案，用户操作步骤最少，体验最优
• 如果需要支持上传大体积、文件数量多的游戏资源包，优先选择压缩包上传方案，大幅降低上传耗时、减少服务端的并发连接压力

内容的提问来源于stack exchange，提问作者Stefan