基于springboot+vue.js实现的超大文件分片极速上传及流式下载(已开放源码)
FastLoader介绍基于springboot+vue.js实现的超大文件分片极速上传及流式下载,支持超大文件断点续传、秒传软件架构系统整体采用前后端分离开发,基于OpenJDK11版本:前端:vue.js+elmentUI后端:springboot+mybatis数据库:mysql工程管理工具:maven教程克隆工程代码fastloader目录为后台SpringBoot工程fastloader
FastLoader
一、介绍
基于springboot+vue.js实现的超大文件分片极速上传及流式下载,支持超大文件断点续传、秒传
二、软件架构
系统整体采用前后端分离开发,基于OpenJDK11版本:
前端:vue.js+elmentUI
后端:springboot+mybatis
数据库:mysql
工程管理工具:maven
三、部署教程
-
克隆工程代码
(1)fastloader目录为后台SpringBoot工程
(2)fastloader-ui为前端Vue工程 -
把后台工程resource下sql语句执行到mysql数据库中,并配置application.yml中的数据源
-
把工程工程导入到开发工具中,例如eclipse,右键pom.xml文件更新工程所依赖的jar包(建议maven配置阿里库),之后启动springboot工程
-
把前端工程导入到开发工具例如vscode中,运行npm install安装依赖包,之后npm run dev启动前端工程
-
打开谷歌浏览器,输入http:localhost:80进入系统
四、使用说明
- 点击上传按钮,可选择一个GB级别的文件,进行上传
- 点击删除按钮,可以删除已经上传的文件,默认文件目录中不物理删除
- 点击上传同一个文件,可实现秒传
五、界面效果
六、系统特色
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);
},
七、开源地址
https://gitee.com/luckytuan/fast-loader
附java区块链技术交流QQ群,欢迎进群下载区块链技术资料并学习交流
更多推荐
所有评论(0)