基于springboot+vue.js实现的超大文件分片极速上传及流式下载（已开放源码）

本文链接：https://blog.csdn.net/victory_long/article/details/108571028

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);
            },