JS上传文件夹的功能如何实现

 纯前端，JS，VUE2，VUE3，React，也就是完全利用JS实现文件夹上传，断点续传，加密上传，加密下载，文件夹下载，保留层级结构，下载的时候也保存层级结构。

网上搜了一下，基本上大部分的文章里面提到的前端JS或VUE或HTML5上传文件夹的方案都是使用JS的API来实现的，也就是html5提供的一个API，也就是chrome提供的API。用是能用，但是不够好用，有很多限制，也不够灵活。不太能够满足用户的实际应用需求，

纯JS的话痛点很多，不太容易扩展，后期维护也是痛点，IE不能支持。主要的一个痛点就是性能比较差，文件夹里面的文件不能多，一般的话5个左右吧，做演示还行，但是在实际客户应用场景就不行了，因为用户一般传文件夹的话一个文件夹里面就包含5万个文件，比我们测试环境的负载数据多了整整1万倍。浏览器很难扛得住。而且用户电脑也不是我们开发机配置这么高。

我们做项目的话个人用户比较少，一般都是行业用户，比如政府，公司，金融，这类企业，他们对用户体验要求较高。就实际项目开发和实施的情况来看，html5或者chrome提供的功能基本上都是不能够满足他们需求的，都需要我们进行定制开发。就说文件夹上传吧，html5提供了API,用户开始用的时候还行，然后就提了要求要求支持断点续传，

1.下载示例

https://gitee.com/xproer/up6-vue-cli

将up6组件复制到项目中

示例中已经包含此目录

1.引入up6组件

2.配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表

参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.处理事件

启动测试

启动成功

效果

数据库