README.md · 卡卡/OPEN-文件上传下载+大文件分片上传+断点续传+漂亮的前端页面

# **文件上传下载经典案例**

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

#### 先打个广告：

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

- **Maven地址：** https://mvnrepository.com/artifact/com.github.wgbvirtuals/vip-swagger 
- **源码地址：** https://gitee.com/Analyzer/vip-swagger

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

- **Maven地址：** https://mvnrepository.com/artifact/com.github.wgbvirtuals/vip-knife4j-starter
- **源码地址：** https://gitee.com/Analyzer/vip-knife4j-starter

**开发环境：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作为上传后的文件名。

### 项目结构

![输入图片说明](doc/images/1660528590669.png)

### 项目运行

##### 1.导入数据库文件

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

![输入图片说明](doc/images/1660528836136.png)

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

![输入图片说明](doc/images/1660528941947.png)

##### 3.启动项目，然后双击打开前端页面：index.html

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

![输入图片说明](https://images.gitee.com/uploads/images/2020/0903/184500_d41dadc1_1676717.png "image-20200903183735347.png")

### 断点续传测试

##### 1.修改前端URL常量（前端全局使用的URL）：

![输入图片说明](https://images.gitee.com/uploads/images/2020/0903/184527_101a101b_1676717.png "image-20200903183521963.png")

##### 2.点击“+”上传

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

上传中：

![输入图片说明](https://images.gitee.com/uploads/images/2020/0903/184543_34bb6839_1676717.png "image-20200903183705481.png")

上传完成：

![输入图片说明](https://images.gitee.com/uploads/images/2020/0903/184603_40477348_1676717.png "image-20200903183820976.png")

**注：**

1.上传完成后再次选择这个文件就会启动秒传功能。
    
    2.上传过程如果中断，下次再上传该文件将只会上传剩下的分片（断点续传）
    
    3.上传完成后文件配置路径中会生成.conf文件，这个文件就是判断文件是否已经上传的配置，如果删除，则下次上传不会启动秒传，而是创建一个后缀为_tmp的文件，导致新上传文件不可用。所以这里可以进行二次开发进行限制上传、覆盖上传或者文件重命名操作。

### 其他配置说明

#### 部署至Linux系统注意事项（打包时配置文件分离）

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

### 接口文档

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

![输入图片说明](doc/images/1660533737353.png)

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

上传接口与前端的对接时，只需要传过来的是form表单里的<input type="file" name="file">即可。例如：

![输入图片说明](https://images.gitee.com/uploads/images/2020/0806/175323_adb2427c_1676717.png "1.png")

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

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

简介

发行版

贡献者

近期动态

卡卡/OPEN-文件上传下载+大文件分片上传+断点续传+漂亮的前端页面 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

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