前端如何实现文件夹上传或者批量文件夹上传?

遇到一个坑爹的需求,需要vue项目支持本地批量上传文件夹,也就是客户在本地新建一个文件夹,页面点击上传按钮实现将文件夹上传到服务,做过文件上传,是用的ivew组件,可文件夹上传没有做过,有大佬们知道怎么做嘛?文件夹上传感觉有很多控件都不支持吧

阅读 9k
4 个回答

设置webkitdirectory可以上传文件夹(设置后不能上传单个文件),缺点是有兼容性问题,

纯前端不可能上传文件夹,可以多文件上传。
如楼上所说,折中方案是要求用户将文件夹压缩成一个文件。
要么就做成application。
可以关闭问题了。
有个不成熟的新特性可以了解一下,楼下也提到了。
https://developer.mozilla.org...

总结一下我跟你的交流,我写一下方案吧。仅仅是我的思路,其他人也许有更好的方案
方案一、要求用户把所有文件压缩到一个zip文件里,整体上传,保留文件夹层级,后端把zip文件解压,返回完整的目录结构,前端再做展示。如有内部单个文件夹的修改,需要用户在前端点选目标文件夹控件,点击更新内容,然后上传单个zip文件。单个文件修改就点选单个文件更新,但是单个文件不需要压缩和解压。
方案二、使用阿里云oss对象存储服务,对应的客户端工具可以实现你说的功能。

web实现不了这功能。
input.type=file 只能选文件, 选不了文件夹。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题