js在本地新建文件夹 (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

js上传图片并压缩处理,js上传文件到服务器

将up6组件复制到项目中

示例中已经包含此目录

js上传图片并压缩处理,js上传文件到服务器

1.引入up6组件

js上传图片并压缩处理,js上传文件到服务器

2.配置接口地址

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

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

js上传图片并压缩处理,js上传文件到服务器

3.处理事件

js上传图片并压缩处理,js上传文件到服务器

启动测试

js上传图片并压缩处理,js上传文件到服务器

启动成功

js上传图片并压缩处理,js上传文件到服务器

效果

js上传图片并压缩处理,js上传文件到服务器

数据库

js上传图片并压缩处理,js上传文件到服务器