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);
            },
七、开源地址

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

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

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐