基于springboot+vue.js实现的超大文件分片极速上传及流式下载（已开放源码）_前端有什么框架支持大文件分段下载

FastLoader

一、介绍

基于springboot+vue.js实现的超大文件分片极速上传及流式下载，支持超大文件断点续传、秒传

二、软件架构

系统整体采用前后端分离开发，基于OpenJDK11版本：

前端：vue.js+elmentUI

后端：springboot+mybatis

数据库：mysql

工程管理工具：maven

三、部署教程

1. 克隆工程代码
   （1）fastloader目录为后台SpringBoot工程
   （2）fastloader-ui为前端Vue工程

2. 把后台工程resource下sql语句执行到mysql数据库中，并配置application.yml中的数据源

3. 把工程工程导入到开发工具中，例如eclipse，右键pom.xml文件更新工程所依赖的jar包（建议maven配置阿里库），之后启动springboot工程

4. 把前端工程导入到开发工具例如vscode中，运行npm install安装依赖包，之后npm run dev启动前端工程

5. 打开谷歌浏览器，输入http:localhost:80进入系统

四、使用说明

1. 点击上传按钮，可选择一个GB级别的文件，进行上传
2. 点击删除按钮，可以删除已经上传的文件，默认文件目录中不物理删除
3. 点击上传同一个文件，可实现秒传

五、界面效果

六、系统特色

1.清晰的架构

系统采用目前市面比较流行的前后端分离架构，便于扩展，方便移植与修改，结构清晰

2.丰富的代码注释

项目源码非常整洁，没有一行多余的代码，关键代码都有注释，实现思路一目了然，如下：

/*
            第一个参数 rootFile 就是成功上传的文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传文件；
            第二个参数 file 就是当前成功的 Uploader.File 对象本身；
            第三个参数就是 message 就是服务端响应内容，永远都是字符串；
            第四个参数 chunk 就是 Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status就是
            */
            onFileSuccess(rootFile, file, response, chunk) {
                //refProjectId为预留字段，可关联附件所属目标，例如所属档案，所属工程等
                file.refProjectId = "123456789";
                mergeFile(file).then( responseData=> {
                    if(responseData.data.code === 415){
                        console.log("合并操作未成功，结果码："+responseData.data.code);
                    }
                }).catch(function (error){
                    console.log("合并后捕获的未知异常："+error);
                });
            },
            onFileError(rootFile, file, response, chunk) {
                console.log('上传完成后异常信息：'+response);
            },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

七、开源地址

https://gitee.com/luckytuan/fast-loader

附java区块链技术交流QQ群，欢迎进群下载区块链技术资料并学习交流