Vue实现大文件分片上传、断点续传

Vue实现大文件分片上传、断点续传，Vue实现大文件分片上传，Vue实现大文件分片上传解决方案，Vue实现大文件分片上传思路，Vue实现大文件分片上传源码，Vue实现大文件分片上传实例，Vue实现大文件分块上传，Vue实现大文件切片上传，Vue实现大文件加密上传，Vue实现文件夹上传，

我们公司最近有一个项目，要做一个业务管理系统，主要就是管理一些项目文件，经常要上传下载文件，

前端用了VUE2,VUE3,JQ，后端用了JAVA,JSP,SpringBoot，要求在前端提供大文件上传的功能，文件大小约为10G左右，可能偶尔有文件会超过这个大小，但是不多，

网上搜了一圈，基本上都是用的HTML5实现的，也就是chrome提供的API，小文件还好，比如几十MB，500MB左右的话，单个文件上传还凑合，但是文件大点，文件一多就不行了。比如1G以上，或者10G以上，100个文件，1000个文件同时传，就有点不行了，主要就是页面反应慢，卡顿。

我们之前用过WebUploader，上传小一点的文件还不错，但是大点的文件就不行了，比如上传5G的文件，上传经常会自动中断，不太稳定。

浏览器要求支持包含IE在内的所有浏览器，系统环境要求支持信创国产化，比如银河麒麟，统信，龙芯，

我们的要求就是上传大文件不能出现无缘无故中断的现象，要支持断点续传，上传速度不能太慢，上传的数据不出错，基本就是这些了。

需要支持大文件秒传功能，相信大家都体现过了，网盘上传的时候，发现上传的文件秒传了。其实原理稍微有研究过的同学应该知道，其实就是检验文件MD5，记录下上传到系统的文件的MD5,在一个文件上传前先获取文件内容MD5值或者部分取值MD5，然后在匹配系统上的数据。

1.下载示例

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

 

 

将up6组件复制到项目中

示例中已经包含此目录

 

 

1.引入up6组件

 

 

2.配置接口地址

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

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

 

 

3.处理事件

 

 

启动测试

 

 

启动成功

 

 

效果

 

 

数据库

 

源码工程文档：泽优上传下载-源码版-工程文档.pdf

源码报价单：泽优上传下载-源码版-2024.pdf

OEM版报价单：泽优上传下载-OEM版-2024.pdf

产品源代码：up6-code.zip
授权码生成器：up6-lic-app.zip