SpringBoot+Vue 实现文件的断点续传、秒传

╰+攻爆jí腚メ 2024-02-22 09:53 20阅读 0赞

## 系列文章目录 ##

--------------------

#### 文章目录 ####

*  系列文章目录
 *  前言
 *   *   *  整体过程
         *  流程图
         *  数据库设计
 *  一、前端
 *   *   *  计算分片
         *  文件上传
         *  合并文件
 *  二、后端
 *   *  1.检查文件接口
     *  2.上传文件接口
     *  3.合并文件接口
 *  三、测试
 *   *  断点续传
     *  秒传
 *  总结

--------------------

## 前言 ##

*文件断点续传和秒传是基于分片上传实现，本次基于SpringBoot和Vue实现。*

#### 整体过程 ####

**1、前端将文件分片并将分片信息提交给后端保存  
2、后端将前端每次上传的文件,放入到缓存目录  
3、等待前端将全部的文件内容都上传完毕后,发送一个合并请求  
4、后端合并文件**

#### 流程图 ####

![在这里插入图片描述][0641d62236964a69b3ba902fa25d6314.png]

#### 数据库设计 ####

![在这里插入图片描述][3c31a0aef7ff41e3b6e5e0c0d7dff55d.png]  
![在这里插入图片描述][9ae01ab8f2cc46deabc763f0acae6da3.png]

## 一、前端 ##

> 安装vue-simple-uploader、spark-md5依赖  
> vue-simple-uploader用来快速实现文件上传页面  
> spark-md5用来计算分片信息

#### 计算分片 ####

![在这里插入图片描述][03546ee8ae44490a9d4b2073ae3ad3eb.png]

#### 文件上传 ####

![在这里插入图片描述][25eacae76774400ca9a7291dea68fdd9.png]

#### 合并文件 ####

![在这里插入图片描述][5fb93454296f4fc483f6f61fb6ba67a5.png]

## 二、后端 ##

### 1.检查文件接口 ###

> 前端分片完成之后请求后端根据md5检查当前文件是否上传过，如果有上传过，判断是否已经上传完成，若上传完成则可以实现秒传，若没有上传过则继续上次上传的位置开始上传即实现分片上传。

public FileChunkCheckResponse checkFileChunk(FileChunkRequest fileChunkRequest) {
        
            SysFileList sysFileList = sysFileListService.getByMd5(fileChunkRequest.getIdentifier());
            // 根据md5值查询文件是否已经上传过、则可以秒传
            if(Objects.nonNull(sysFileList)){
        
                return FileChunkCheckResponse.builder().skipUpload(Boolean.TRUE).build();
            }
            // 先检查文件是否已上传
            List<SysChunk> chunkList = this.getChunkList(fileChunkRequest.getIdentifier());
            List<Integer> chunkNumberList = chunkList.stream().mapToInt(SysChunk::getChunkNumber).boxed().collect(Collectors.toList());
            return FileChunkCheckResponse.builder().skipUpload(false).uploaded(chunkNumberList).build();
        }

### 2.上传文件接口 ###

> 能走到这个接口说明文件还没上传完，判断是否存在临时文件夹不存在则创建，然后保存当前分片信息到文件分片表，最后校验是否所有分片都上传完成，返回标识给前端。

public FileChunkCheckResponse upload(FileChunkRequest fileChunkRequest) throws IOException {
        
            String path = chunkPath + File.separator + fileChunkRequest.getIdentifier();
            boolean exist = FileUtil.exist(path);
            if (!exist) {
        
                // 创建文件夹
                FileUtil.mkdir(path);
            }
            // 保存文件
            FileUtil.writeBytes(fileChunkRequest.getFile().getBytes(), path + File.separator + fileChunkRequest.getChunkNumber());
            // 保存分片信息
            SysChunk sysChunk = new SysChunk();
            sysChunk.setChunkNumber(fileChunkRequest.getChunkNumber());
            sysChunk.setChunkSize(fileChunkRequest.getChunkSize());
            sysChunk.setCurrentChunkSize(fileChunkRequest.getCurrentChunkSize());
            sysChunk.setFilename(fileChunkRequest.getFilename());
            sysChunk.setIdentifier(fileChunkRequest.getIdentifier());
            sysChunk.setRelativePath(path);
            sysChunk.setTotalChunks(fileChunkRequest.getTotalChunks());
            sysChunk.setTotalSize(fileChunkRequest.getTotalSize());
            sysChunkService.save(sysChunk);
            // 查询所有分块
            List<SysChunk> chunkList = sysChunkService.getChunkList(fileChunkRequest.getIdentifier());
            List<Integer> chunkNumberList = chunkList.stream().mapToInt(SysChunk::getChunkNumber).boxed().collect(Collectors.toList());
            FileChunkCheckResponse response = FileChunkCheckResponse.builder().uploaded(chunkNumberList).build();
            // 是否上传完成
            if (chunkNumberList.size() == fileChunkRequest.getTotalChunks()) {
        
                response.setNeedMerge(Boolean.TRUE);
            }
            // 是否需要添加当前分块
            return response;
        }

### 3.合并文件接口 ###

> 当前端接收到后端返回的合并标识后，再请求文件合并接口。  
> 后端使用RandomAccessFile来合并所有分片文件、并删除临时文件夹的文件，并将文件信息存入文件信息表，当再次上传相同文件时就可以通过查询表并读取相应文件实现文件秒传。

public boolean merge(FileChunkRequest fileChunkRequest) {
        
            Integer totalChunks = fileChunkRequest.getTotalChunks();
            String chunkFile = chunkPath + File.separator + fileChunkRequest.getIdentifier();
            if (checkChunk(totalChunks, chunkFile)) {
        
                // 读取所有分片文件
                String file = uploadPath + File.separator + fileChunkRequest.getFilename();
                File chunkFileFolder = new File(chunkFile);
                // 要合并生成的文件
                File mergeFile = new File(file);
                File[] chunks = chunkFileFolder.listFiles();
                // 切片排序
                assert chunks != null;
                List<File> fileList = Arrays.asList(chunks);
                fileList.sort(Comparator.comparingInt((File o) -> Integer.parseInt(o.getName())));
                try {
        
                    RandomAccessFile randomAccessFileWriter = new RandomAccessFile(mergeFile, "rw");
                    byte[] bytes = new byte[1024];
                    for (File chunk : chunks) {
        
                        RandomAccessFile randomAccessFileReader = new RandomAccessFile(chunk, "r");
                        int len;
                        while ((len = randomAccessFileReader.read(bytes)) != -1) {
        
                            randomAccessFileWriter.write(bytes, 0, len);
                        }
                        randomAccessFileReader.close();
                    }
                    randomAccessFileWriter.close();
                } catch (Exception ignored) {
        
                    return Boolean.FALSE;
                }
                // 删除分片文件夹
                FileUtil.del(chunkFile);
                // 清空分片信息
                sysChunkService.removeByFileIdentifier(fileChunkRequest.getIdentifier());
                // 计算文件总大小
    
                // 保存文件信息
                SysFileList sysFileList = new SysFileList();
                sysFileList.setFilename(fileChunkRequest.getFilename());
                sysFileList.setIdentifier(fileChunkRequest.getIdentifier());
                sysFileList.setLocation(file);
                sysFileList.setTotalSize(fileChunkRequest.getTotalSize());
                sysFileListService.save(sysFileList);
            }
            return Boolean.TRUE;
        }

## 三、测试 ##

### 断点续传 ###

> 在文件上传到一半的时候取消上传，并且再次上传可以看到是从中间部分开始重新上传的

![在这里插入图片描述][a086bc7d430147ea91f51a7975c77075.gif]

### 秒传 ###

> 可以看到已经上传的文件可以直接上传成功

![在这里插入图片描述][6f45ec5f69314b1d8628d6e2226de9e6.gif]

--------------------

## 总结 ##

代码已经上传到gitee需要自取（**可以的话麻烦点个star，感谢**）：`https://gitee.com/xyzissj/study/tree/master/fileUpload`

以上仅是简单实现文件断点续传、秒传，实际业务系统中文件上传时还需要`校验授权信息`等，还可以`改进为多线程`提高上传效率。

[0641d62236964a69b3ba902fa25d6314.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/c1e47cbd63a04361aa796cc330ddace9.png
[3c31a0aef7ff41e3b6e5e0c0d7dff55d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/57ebda1f2cb746e9b6894c19ed76aa5b.png
[9ae01ab8f2cc46deabc763f0acae6da3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/b5dc29431bf84ca8902bce0a7f944b64.png
[03546ee8ae44490a9d4b2073ae3ad3eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/4eb2256184b04042bcebb4ed515a36aa.png
[25eacae76774400ca9a7291dea68fdd9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/b82f8b6cdcd943f49d979cb6247221b9.png
[5fb93454296f4fc483f6f61fb6ba67a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/19730766ddb44b87bc51371df69547f1.png
[a086bc7d430147ea91f51a7975c77075.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/bb5b61330d85478d87ff6b4d9b86bc47.png
[6f45ec5f69314b1d8628d6e2226de9e6.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/f741dc2801c3469292f0669f83624105.png