1 Star 0 Fork 306

open / OPEN-文件上传下载+大文件断点续传+漂亮的前端页面

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 6.86 KB
一键复制 编辑 原始数据 按行查看 历史
Analyzer 提交于 2023-06-16 11:34 . update README.md.

文件上传下载经典案例

本案例提供了分片上传、断点续传、秒传、下载功能

先打个广告:

本项目接口文档使用的是自定义的无侵入Swagger组件该组件已发布到中央仓库,喜欢的可以点个star

还有Swagger升级版Knife4j组件,同样发布到了中央仓库,都是无代码侵入的

开发环境:JDK8,SpringBoot2.x,MySQL5.5,web-uploader

开发工具:IntelliJ IDEA

关于分片上传&断点续传

项目提供了普通文件上传接口 & 大文件分片上传接口,普通文件上传的接口只是附加提供的,目前与前端集成的是大文件分片上传,接口是breakpointResumeUpload。

分片: 分片任务是在前端由web-uploader插件完成,流程:1.前端先发送check-file(检查文件MD5)来确认文件是直接秒传还是分片上传,如果计算出文件所有片已经上传完成,则启用秒传(秒传就是不传),如果是新文件,则需要分片上传,由web-uploader插件将文件按固定大小进行切割,然后逐片上传。

断点续传: 意思就是一个大文件分了多少片,这些片已经上传了哪些,还有哪些没上传,这些都会记录在文件存储目录下的.conf文件中,当你上传大文件时,传一部分后刷新浏览器或关闭浏览器,这时候传输会中断,然后你再打开页面重新上传该文件,它会先检测还有哪些片没有上传,然后直接上传的上次未传的片,这就是断点续传。

整个流程如下:

  1. 校验文件上传状态: 前端生成该文件的MD5密文并进行分片,上传之前请求check-md5接口,传入文件名和密文,接口校验文件是未上传 或 上传了一部分 或 已上传完成三个状态,其中未上传返回自定义状态码404,上传一部分则返回状态206+未上传的分片ID,上传完成则返回状态200。
  2. 前端逐片上传: 校验完成后,根据校验结果对未上传的分片进行逐个上传,上传分片时参数主要是:总片数、当前片ID、片文件
  3. 上传接口: 上传接口会先去获取并解析该文件的conf文件(conf文件是RandomAccessFile,该类是通过提供指针的方式操作文件,文件存储的是一个二进制数组,所以可以用来数组下标标记片ID),使用setLength方法设置conf文件长度,使用seek方法跳到当前上传的片ID的位置,把该位置的值替换成127,然后将该分片使用指针偏移的方式插入到_tmp临时文件(临时文件也是RandomAccessFile文件)中,然后校验是否所有的片都上传完成,是则修改临时文件为正式文件名,至此上传完成,否则直接返回该分片上传完成
  4. 上传进度: 前端收到当前片的响应结果后,会根据已上传片数量获取到上传进度
  5. MD5的用法: 以上就是分片上传的全部过程,其中本项目中,文件MD5并没有派上用场,原因是我这里是使用文件名做区分的,这样的弊端就是如果上传同名文件但是内容不同时,仍然会走秒传功能;解决办法是可以使用checkFileMd5(String fileMd5, String fileName)方法和fragmentFileUploader(UploadFileParam param, long chunkSize, HttpServletRequest request)方法配合使用,这样可以识别非同一文件但同名的文件上传,或者上传时前端传入一个唯一ID作为上传后的文件名。

项目结构

输入图片说明

项目运行

1.导入数据库文件

导入doc目录下的sql文件到数据库,并修改application.yml配置文件中的数据库配置

输入图片说明

2.修改application.yml中的文件保存目录、端口号等等(自行选择配置)

输入图片说明

3.启动项目,然后双击打开前端页面:index.html

先看一下效果:可一次性上传多个文件(这里只演示了一个,因为给忘记了,嫌麻烦就没有重新测试)

输入图片说明

断点续传测试

1.修改前端URL常量(前端全局使用的URL):

输入图片说明

2.点击“+”上传

打开doc文件夹下的index.html,选择文件,这里为了显示断点续传的效果,我选择了一个大文件,将自动上传

上传中:

输入图片说明

上传完成:

输入图片说明

注:

1.上传完成后再次选择这个文件就会启动秒传功能。

2.上传过程如果中断,下次再上传该文件将只会上传剩下的分片(断点续传)

3.上传完成后文件配置路径中会生成.conf文件,这个文件就是判断文件是否已经上传的配置,如果删除,则下次上传不会启动秒传,而是创建一个后缀为_tmp的文件,导致新上传文件不可用。所以这里可以进行二次开发进行限制上传、覆盖上传或者文件重命名操作。

其他配置说明

部署至Linux系统注意事项(打包时配置文件分离)

​ 本项目试运行在Windows,如要部署到Linux系统,因为两者的系统路径格式不同,所以需要改配置文件中的文件上传路径,所以为了方便修改配置文件,就把配置文件分离了,部署的时候在要运行的jar包的同级目录下创建一个config目录,然后把配置文件直接拷贝进去就能正常使用了。 ​ 另外可以百度下配置文件的加载顺序及配置文件扫描路径,因为一般项目部署都需要改动一些配置,所以这么做就是为了方便部署。

接口文档

本项目提供了Swagger接口文档,访问:http://IP:端口/swagger-ui.html

输入图片说明

接口就不再一一介绍,在代码中有解释。

上传接口与前端的对接时,只需要传过来的是form表单里的即可。例如:

输入图片说明

同理其他前端UI框架的文件上传也是利用表单进行传输的。

马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
Java
1
https://gitee.com/open_git_1/vip-file-upload.git
git@gitee.com:open_git_1/vip-file-upload.git
open_git_1
vip-file-upload
OPEN-文件上传下载+大文件断点续传+漂亮的前端页面
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891