• SpringBoot大文件上传实现分片、断点续传

    大文件上传流程

    1. 客户端计算文件的哈希值，客户端将哈希值发送给服务端，服务端检查数据库或文件系统中是否已存在相同哈希值的文件，如果存在相同哈希值的文件，则返回秒传成功结果，如果不存在相同哈希值的文件，则进行普通的文件上传流程。
    2. 客户端将要上传的大文件切割成固定大小的切片，客户端将每个切片逐个上传给服务端。服务端接收到每个切片后，暂存或保存在临时位置，当所有切片上传完毕时，服务端将这些切片合并成完整的文件。
    3. 客户端记录上传进度，包括已上传的切片以及每个切片的上传状态。客户端将上传进度信息发送给服务端。如果客户端上传中断或失败，重新连接后发送上传进度信息给服务端。服务端根据上传进度信息确定断点位置，并继续上传剩余的切片。服务端接收切片后，将其暂存或保存在临时位置，当所有切片上传完毕时，服务端将这些切片合并成完整的文件。

    数据库部分

    创建分片数据表和文件数据表 

    1. create table if not exists file_chunk
    2. (
    3.     id bigint unsigned auto_increment
    4.         primary key,
    5.     file_name varchar(255) null comment '文件名',
    6.     chunk_number int null comment '当前分片，从1开始',
    7.     chunk_size bigint null comment '分片大小',
    8.     current_chunk_size bigint null comment '当前分片大小',
    9.     total_size bigint null comment '文件总大小',
    10.     total_chunk int null comment '总分片数',
    11.     identifier varchar(128) null comment '文件校验码，md5',
    12.     relative_path varchar(255) null comment '相对路径',
    13.     create_by varchar(128) null comment '创建者',
    14.     create_time datetime default CURRENT_TIMESTAMP not null comment '创建时间',
    15.     update_by varchar(128) null comment '更新人',
    16.     update_time datetime default CURRENT_TIMESTAMP not null on update CURRENT_TIMESTAMP comment '更新时间'
    17. )
    18.     comment '文件块存储';
    19.  
    20. create table if not exists file_storage
    21. (
    22.     id bigint auto_increment comment '主键'
    23.         primary key,
    24.     real_name varchar(128) null comment '文件真实姓名',
    25.     file_name varchar(128) null comment '文件名',
    26.     suffix varchar(32) null comment '文件后缀',
    27.     file_path varchar(255) null comment '文件路径',
    28.     file_type varchar(255) null comment '文件类型',
    29.     size bigint null comment '文件大小',
    30.     identifier varchar(128) null comment '检验码 md5',
    31.     create_by varchar(128) null comment '创建者',
    32.     create_time datetime default CURRENT_TIMESTAMP not null comment '创建时间',
    33.     update_by varchar(128) null comment '更新人',
    34.     update_time datetime default CURRENT_TIMESTAMP not null on update CURRENT_TIMESTAMP comment '更新时间'
    35.  
    36. )
    37.     comment '文件存储表';
    38.

    后端部分 

    引入依赖

    1.          <dependency>
    2.             <groupId>org.springframework.boot</groupId>
    3.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
    4.         </dependency>
    5.         <dependency>
    6.             <groupId>cn.hutool</groupId>
    7.             <artifactId>hutool-all</artifactId>
    8.             <version>5.7.22</version>
    9.         </dependency>
    10.         <dependency>
    11.             <groupId>com.alibaba</groupId>
    12.             <artifactId>fastjson</artifactId>
    13.             <version>1.2.47</version>
    14.         </dependency>
    15.         <dependency>
    16.             <groupId>org.springframework.boot</groupId>
    17.             <artifactId>spring-boot-starter-data-redis</artifactId>
    18.         </dependency>
    19.         <!-- 数据库-->
    20.         <dependency>
    21.             <groupId>mysql</groupId>
    22.             <artifactId>mysql-connector-java</artifactId>
    23.             <version>${mysql.version}</version>
    24.         </dependency>
    25.         <dependency>
    26.             <groupId>com.baomidou</groupId>
    27.             <artifactId>mybatis-plus-boot-starter</artifactId>
    28.             <version>3.5.1</version>
    29.         </dependency>

     properties文件配置

    1. # 设置服务器上传最大文件大小为1g
    2. spring.servlet.multipart.max-file-size=1GB
    3. spring.servlet.multipart.max-request-size=1GB
    4. # 数据库连接
    5. spring.datasource.url=jdbc:mysql://127.0.0.1:3306/big-file?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    6. spring.datasource.username=root
    7. spring.datasource.password=root123
    8. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    9. spring.datasource.hikari.pool-name=HikariCPDatasource
    10. spring.datasource.hikari.minimum-idle=5
    11. spring.datasource.hikari.idle-timeout=180000
    12. spring.datasource.hikari.maximum-pool-size=10
    13. spring.datasource.hikari.auto-commit=true
    14. spring.datasource.hikari.max-lifetime=1800000
    15. spring.datasource.hikari.connection-timeout=30000
    16. spring.datasource.hikari.connection-test-query=SELECT 1
    17. # redis连接
    18. spring.redis.host=xx.xx.xx.xx
    19. spring.redis.port=6379
    20. spring.redis.timeout=10s
    21. spring.redis.password=123
    22. # 配置thymeleaf模板
    23. spring.thymeleaf.cache=false
    24. spring.thymeleaf.prefix=classpath:/templates/
    25. spring.thymeleaf.suffix=.html
    26. # 文件存储位置
    27. file.path=D:\\tmp\\file
    28. # 分片大小设为20 * 1024 * 1024 kb
    29. file.chunk-size=20971520

    model

    返回给前端的vo判断是否已经上传过，是就秒传，不是就分片上传 

    1. import lombok.Data;
    2.  
    3. import java.util.List;
    4.  
    5. /**
    6.  * 检验返回给前端的vo
    7.  */
    8. @Data
    9. public class CheckResultVo {
    10.     /**
    11.      * 是否已上传
    12.      */
    13.     private Boolean uploaded;
    14.  
    15.     private String url;
    16.  
    17.     private List uploadedChunks;
    18. }

    接收前端发送过来的分片

    1. import lombok.Data;
    2. import org.springframework.web.multipart.MultipartFile;
    3.  
    4. /**
    5.  * 接收前端传过来的参数
    6.  * 配合前端上传方法接收参数，参考官方文档
    7.  * https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#%E6%9C%8D%E5%8A%A1%E7%AB%AF%E5%A6%82%E4%BD%95%E6%8E%A5%E5%8F%97%E5%91%A2
    8.  */
    9.  
    10. @Data
    11. public class FileChunkDto {
    12.     /**
    13.      * 当前块的次序，第一个块是 1，注意不是从 0 开始的
    14.      */
    15.     private Integer chunkNumber;
    16.     /**
    17.      * 文件被分成块的总数。
    18.      */
    19.     private Integer totalChunks;
    20.     /**
    21.      * 分块大小，根据 totalSize 和这个值你就可以计算出总共的块数。注意最后一块的大小可能会比这个要大
    22.      */
    23.     private Long chunkSize;
    24.     /**
    25.      * 当前要上传块的大小，实际大小
    26.      */
    27.     private Long currentChunkSize;
    28.     /**
    29.      * 文件总大小
    30.      */
    31.     private Long totalSize;
    32.     /**
    33.      * 这个就是每个文件的唯一标示
    34.      */
    35.     private String identifier;
    36.     /**
    37.      * 文件名
    38.      */
    39.     private String filename;
    40.     /**
    41.      * 文件夹上传的时候文件的相对路径属性
    42.      */
    43.     private String relativePath;
    44.     /**
    45.      * 文件
    46.      */
    47.     private MultipartFile file;
    48. }

    数据库分片的实体类 

    1. import lombok.Data;
    2.  
    3. import java.io.Serializable;
    4. import java.time.LocalDateTime;
    5.  
    6. /**
    7.  * 文件块存储(FileChunk)表实体类
    8.  */
    9. @Data
    10. public class FileChunk implements Serializable {
    11.     /**主键**/
    12.     private Long id;
    13.     /**文件名**/
    14.     private String fileName;
    15.     /**当前分片，从1开始**/
    16.     private Integer chunkNumber;
    17.     /**分片大小**/
    18.     private Long chunkSize;
    19.     /**当前分片大小**/
    20.     private Long currentChunkSize;
    21.     /**文件总大小**/
    22.     private Long totalSize;
    23.     /**总分片数**/
    24.     private Integer totalChunk;
    25.     /**文件标识 md5校验码**/
    26.     private String identifier;
    27.     /**相对路径**/
    28.     private String relativePath;
    29.  
    30.     /**创建者**/
    31.     private String createBy;
    32.     /**创建时间**/
    33.     private LocalDateTime createTime;
    34.     /**更新人**/
    35.     private String updateBy;
    36.     /**更新时间**/
    37.     private LocalDateTime updateTime;
    38. }
    39.

    数据库的文件的实体类 

    1. import lombok.Data;
    2.  
    3. import java.io.Serializable;
    4. import java.time.LocalDateTime;
    5.  
    6. /**
    7.  * 文件存储表(FileStorage)表实体类
    8.  */
    9. @Data
    10. public class FileStorage implements Serializable {
    11.     /**主键**/
    12.     private Long id;
    13.     /**文件真实姓名**/
    14.     private String realName;
    15.     /**文件名**/
    16.     private String fileName;
    17.     /**文件后缀**/
    18.     private String suffix;
    19.     /**文件路径**/
    20.     private String filePath;
    21.     /**文件类型**/
    22.     private String fileType;
    23.     /**文件大小**/
    24.     private Long size;
    25.     /**检验码 md5**/
    26.     private String identifier;
    27.     /**创建者**/
    28.     private String createBy;
    29.     /**创建时间**/
    30.     private LocalDateTime createTime;
    31.     /**更新人**/
    32.     private String updateBy;
    33.     /**更新时间**/
    34.     private LocalDateTime updateTime;
    35. }
    36.

    Mapper层

    操作分片的数据库的mapper 

    1. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    2. import com.example.demo.model.FileChunk;
    3. import org.apache.ibatis.annotations.Mapper;
    4. /**
    5.  * 文件块存储(FileChunk)表数据库访问层
    6.  */
    7. @Mapper
    8. public interface FileChunkMapper extends BaseMapper {
    9.  
    10. }

    操作文件的数据库的mapper

    1. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    2. import com.example.demo.model.FileStorage;
    3. import org.apache.ibatis.annotations.Mapper;
    4.  
    5. /**
    6.  * 文件存储表(FileStorage)表数据库访问层
    7.  */
    8. @Mapper
    9. public interface FileStorageMapper extends BaseMapper {
    10.  
    11. }

    Service层

    操作数据库文件分片表的service接口 

    1. import com.baomidou.mybatisplus.extension.service.IService;
    2. import com.example.demo.model.CheckResultVo;
    3. import com.example.demo.model.FileChunk;
    4. import com.example.demo.model.FileChunkDto;
    5.  
    6. /**
    7.  * 文件块存储(FileChunk)表服务接口
    8.  */
    9. public interface FileChunkService extends IService {
    10.     /**
    11.      * 校验文件
    12.      * @param dto 入参
    13.      * @return obj
    14.      */
    15.     CheckResultVo check(FileChunkDto dto);
    16. }

     操作数据库文件表的service接口 

    1. import com.baomidou.mybatisplus.extension.service.IService;
    2. import com.example.demo.model.FileChunkDto;
    3. import com.example.demo.model.FileStorage;
    4.  
    5.  
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8.  
    9. /**
    10.  * 文件存储表(FileStorage)表服务接口
    11.  */
    12. public interface FileStorageService extends IService {
    13.     /**
    14.      * 文件上传接口
    15.      * @param dto 入参
    16.      * @return
    17.      */
    18.     Boolean uploadFile(FileChunkDto dto);
    19.  
    20.     /**
    21.      * 下载文件
    22.      * @param identifier
    23.      * @param request
    24.      * @param response
    25.      */
    26.     void downloadByIdentifier(String identifier, HttpServletRequest request, HttpServletResponse response);
    27. }
    28.

    Impl层

    操作数据库文件分片表的impl

    1. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
    2. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    3. import com.example.demo.mapper.FileChunkMapper;
    4. import com.example.demo.model.CheckResultVo;
    5. import com.example.demo.model.FileChunk;
    6. import com.example.demo.model.FileChunkDto;
    7. import com.example.demo.service.FileChunkService;
    8. import org.springframework.stereotype.Service;
    9.  
    10.  
    11. import java.util.ArrayList;
    12. import java.util.List;
    13.  
    14. /**
    15.  * 文件块存储(FileChunk)表服务实现类
    16.  */
    17. @Service
    18. public class  FileChunkServiceImpl extends ServiceImpl implements FileChunkService {
    19.  
    20.     @Override
    21.     public CheckResultVo check(FileChunkDto dto) {
    22.         CheckResultVo vo = new CheckResultVo();
    23.         // 1. 根据 identifier 查找数据是否存在
    24.         List list = this.list(new LambdaQueryWrapper()
    25.                 .eq(FileChunk::getIdentifier, dto.getIdentifier())
    26.                 .orderByAsc(FileChunk::getChunkNumber)
    27.         );
    28.         // 如果是 0 说明文件不存在，则直接返回没有上传
    29.         if (list.size() == 0) {
    30.             vo.setUploaded(false);
    31.             return vo;
    32.         }
    33.         // 如果不是0，则拿到第一个数据，查看文件是否分片
    34.         // 如果没有分片，那么直接返回已经上穿成功
    35.         FileChunk fileChunk = list.get(0);
    36.         if (fileChunk.getTotalChunk() == 1) {
    37.             vo.setUploaded(true);
    38.             return vo;
    39.         }
    40.         // 处理分片
    41.         ArrayList uploadedFiles = new ArrayList<>();
    42.         for (FileChunk chunk : list) {
    43.             uploadedFiles.add(chunk.getChunkNumber());
    44.         }
    45.         vo.setUploadedChunks(uploadedFiles);
    46.         return vo;
    47.     }
    48. }
    49.

    操作数据库文件表的impl

    1.  
    2. import cn.hutool.core.bean.BeanUtil;
    3. import cn.hutool.core.io.FileUtil;
    4. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
    5. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    6. import com.example.demo.mapper.FileStorageMapper;
    7. import com.example.demo.model.FileChunk;
    8. import com.example.demo.model.FileChunkDto;
    9. import com.example.demo.model.FileStorage;
    10. import com.example.demo.service.FileChunkService;
    11. import com.example.demo.service.FileStorageService;
    12. import com.example.demo.util.BulkFileUtil;
    13. import com.example.demo.util.RedisCache;
    14. import lombok.SneakyThrows;
    15. import lombok.extern.slf4j.Slf4j;
    16. import org.springframework.beans.factory.annotation.Value;
    17. import org.springframework.stereotype.Service;
    18. import org.springframework.web.multipart.MultipartFile;
    19.  
    20.  
    21. import javax.annotation.Resource;
    22. import javax.servlet.http.HttpServletRequest;
    23. import javax.servlet.http.HttpServletResponse;
    24. import java.io.File;
    25. import java.io.IOException;
    26. import java.io.RandomAccessFile;
    27. import java.util.Arrays;
    28. import java.util.List;
    29. import java.util.stream.IntStream;
    30.  
    31. /**
    32.  * 文件存储表(FileStorage)表服务实现类
    33.  */
    34. @Service
    35. @Slf4j
    36. public class FileStorageServiceImpl extends ServiceImpl implements FileStorageService {
    37.  
    38.     @Resource
    39.     private RedisCache redisCache;
    40.  
    41.     /**
    42.      * 默认分块大小
    43.      */
    44.     @Value("${file.chunk-size}")
    45.     public Long defaultChunkSize;
    46.     /**
    47.      * 上传地址
    48.      */
    49.     @Value("${file.path}")
    50.     private String baseFileSavePath;
    51.  
    52.     @Resource
    53.     FileChunkService fileChunkService;
    54.  
    55.     @Override
    56.     public Boolean uploadFile(FileChunkDto dto) {
    57.         // 简单校验，如果是正式项目，要考虑其他数据的校验
    58.         if (dto.getFile() == null) {
    59.             throw new RuntimeException("文件不能为空");
    60.         }
    61.         String fullFileName = baseFileSavePath + File.separator + dto.getFilename();
    62.         Boolean uploadFlag;
    63.         // 如果是单文件上传
    64.         if (dto.getTotalChunks() == 1) {
    65.             uploadFlag = this.uploadSingleFile(fullFileName, dto);
    66.         } else {
    67.             // 分片上传
    68.             uploadFlag = this.uploadSharding(fullFileName, dto);
    69.         }
    70.         // 如果本次上传成功则存储数据到 表中
    71.         if (uploadFlag) {
    72.             this.saveFile(dto, fullFileName);
    73.         }
    74.         return uploadFlag;
    75.     }
    76.  
    77.     @SneakyThrows
    78.     @Override
    79.     public void downloadByIdentifier(String identifier, HttpServletRequest request, HttpServletResponse response) {
    80.         FileStorage file = this.getOne(new LambdaQueryWrapper()
    81.                 .eq(FileStorage::getIdentifier, identifier));
    82.         if (BeanUtil.isNotEmpty(file)) {
    83.             File toFile = new File(baseFileSavePath + File.separator + file.getFilePath());
    84.             BulkFileUtil.downloadFile(request, response, toFile);
    85.         } else {
    86.             throw new RuntimeException("文件不存在");
    87.         }
    88.     }
    89.  
    90.     /**
    91.      * 分片上传方法
    92.      * 这里使用 RandomAccessFile 方法，也可以使用 MappedByteBuffer 方法上传
    93.      * 可以省去文件合并的过程
    94.      *
    95.      * @param fullFileName 文件名
    96.      * @param dto          文件dto
    97.      */
    98.     private Boolean uploadSharding(String fullFileName, FileChunkDto dto) {
    99.         // try 自动资源管理
    100.         try (RandomAccessFile randomAccessFile = new RandomAccessFile(fullFileName, "rw")) {
    101.             // 分片大小必须和前端匹配，否则上传会导致文件损坏
    102.             long chunkSize = dto.getChunkSize() == 0L ? defaultChunkSize : dto.getChunkSize().longValue();
    103.             // 偏移量, 意思是我从拿一个位置开始往文件写入，每一片的大小 * 已经存的块数
    104.             long offset = chunkSize * (dto.getChunkNumber() - 1);
    105.             // 定位到该分片的偏移量
    106.             randomAccessFile.seek(offset);
    107.             // 写入
    108.             randomAccessFile.write(dto.getFile().getBytes());
    109.         } catch (IOException e) {
    110.             log.error("文件上传失败：" + e);
    111.             return Boolean.FALSE;
    112.         }
    113.         return Boolean.TRUE;
    114.     }
    115.  
    116.  
    117.     private Boolean uploadSingleFile(String fullFileName, FileChunkDto dto) {
    118.         try {
    119.             File localPath = new File(fullFileName);
    120.             dto.getFile().transferTo(localPath);
    121.             return Boolean.TRUE;
    122.         } catch (IOException e) {
    123.             throw new RuntimeException(e);
    124.         }
    125.     }
    126.  
    127.     private void saveFile(FileChunkDto dto, String fileName) {
    128.  
    129.         FileChunk chunk = BeanUtil.copyProperties(dto, FileChunk.class);
    130.         chunk.setFileName(dto.getFilename());
    131.         chunk.setTotalChunk(dto.getTotalChunks());
    132.         fileChunkService.save(chunk);
    133.         // 这里每次上传切片都存一下缓存，
    134.         redisCache.setCacheListByOne(dto.getIdentifier(), dto.getChunkNumber());
    135.         // 如果所有快都上传完成，那么在文件记录表中存储一份数据
    136.         List chunkList = redisCache.getCacheList(dto.getIdentifier());
    137.         Integer totalChunks = dto.getTotalChunks();
    138.         int[] chunks = IntStream.rangeClosed(1, totalChunks).toArray();
    139.         // 从缓存中查看是否所有块上传完成，
    140.         if (IntStream.rangeClosed(1, totalChunks).allMatch(chunkList::contains)) {
    141.             // 所有分片上传完成，组合分片并保存到数据库中
    142.             String name = dto.getFilename();
    143.             MultipartFile file = dto.getFile();
    144.             FileStorage fileStorage = new FileStorage();
    145.             fileStorage.setRealName(file.getOriginalFilename());
    146.             fileStorage.setFileName(fileName);
    147.             fileStorage.setSuffix(FileUtil.getSuffix(name));
    148.             fileStorage.setFileType(file.getContentType());
    149.             fileStorage.setSize(dto.getTotalSize());
    150.             fileStorage.setIdentifier(dto.getIdentifier());
    151.             fileStorage.setFilePath(dto.getRelativePath());
    152.             this.save(fileStorage);
    153.         }
    154.     }
    155. }
    156.

    Util工具类

    文件相关的工具类 

    1. import lombok.extern.slf4j.Slf4j;
    2. import org.apache.tomcat.util.http.fileupload.IOUtils;
    3. import sun.misc.BASE64Encoder;
    4.  
    5. import javax.servlet.http.HttpServletRequest;
    6. import javax.servlet.http.HttpServletResponse;
    7. import java.io.File;
    8. import java.io.FileInputStream;
    9. import java.io.IOException;
    10. import java.io.UnsupportedEncodingException;
    11. import java.net.URLEncoder;
    12.  
    13. /**
    14.  * 文件相关的处理
    15.  */
    16. @Slf4j
    17. public class BulkFileUtil {
    18.     /**
    19.      * 文件下载
    20.      * @param request
    21.      * @param response
    22.      * @param file
    23.      * @throws UnsupportedEncodingException
    24.      */
    25.     public static void downloadFile(HttpServletRequest request, HttpServletResponse response, File file) throws UnsupportedEncodingException {
    26.         response.setCharacterEncoding(request.getCharacterEncoding());
    27.         response.setContentType("application/octet-stream");
    28.         FileInputStream fis = null;
    29.  
    30.         String filename = filenameEncoding(file.getName(), request);
    31.         try {
    32.             fis = new FileInputStream(file);
    33.             response.setHeader("Content-Disposition", String.format("attachment;filename=%s", filename));
    34.             IOUtils.copy(fis, response.getOutputStream());
    35.             response.flushBuffer();
    36.         } catch (Exception e) {
    37.             log.error(e.getMessage(), e);
    38.         } finally {
    39.             if (fis != null) {
    40.                 try {
    41.                     fis.close();
    42.                 } catch (IOException e) {
    43.                     log.error(e.getMessage(), e);
    44.                 }
    45.             }
    46.         }
    47.     }
    48.  
    49.     /**
    50.      * 适配不同的浏览器，确保文件名字正常
    51.      *
    52.      * @param filename
    53.      * @param request
    54.      * @return
    55.      * @throws UnsupportedEncodingException
    56.      */
    57.     public static String filenameEncoding(String filename, HttpServletRequest request) throws UnsupportedEncodingException {
    58.         // 获得请求头中的User-Agent
    59.         String agent = request.getHeader("User-Agent");
    60.         // 根据不同的客户端进行不同的编码
    61.  
    62.         if (agent.contains("MSIE")) {
    63.             // IE浏览器
    64.             filename = URLEncoder.encode(filename, "utf-8");
    65.         } else if (agent.contains("Firefox")) {
    66.             // 火狐浏览器
    67.             BASE64Encoder base64Encoder = new BASE64Encoder();
    68.             filename = "=?utf-8?B?" + base64Encoder.encode(filename.getBytes("utf-8")) + "?=";
    69.         } else {
    70.             // 其它浏览器
    71.             filename = URLEncoder.encode(filename, "utf-8");
    72.         }
    73.         return filename;
    74.     }
    75. }

    redis的工具类 

    1. import org.springframework.beans.factory.annotation.Autowired;
    2. import org.springframework.data.redis.core.BoundSetOperations;
    3. import org.springframework.data.redis.core.HashOperations;
    4. import org.springframework.data.redis.core.RedisTemplate;
    5. import org.springframework.data.redis.core.ValueOperations;
    6. import org.springframework.stereotype.Component;
    7.  
    8. import java.util.*;
    9. import java.util.concurrent.TimeUnit;
    10.  
    11. /**
    12.  * spring redis 工具类
    13.  *
    14.  **/
    15. @Component
    16. public class RedisCache
    17. {
    18.     @Autowired
    19.     public RedisTemplate redisTemplate;
    20.  
    21.  
    22.  
    23.     /**
    24.      * 缓存数据
    25.      *
    26.      * @param key 缓存的键值
    27.      * @param data 待缓存的数据
    28.      * @return 缓存的对象
    29.      */
    30.     public  long setCacheListByOne(final String key, final T data)
    31.     {
    32.         Long count = redisTemplate.opsForList().rightPush(key, data);
    33.         if (count != null && count == 1) {
    34.             redisTemplate.expire(key, 60, TimeUnit.SECONDS);
    35.         }
    36.         return count == null ? 0 : count;
    37.     }
    38.  
    39.     /**
    40.      * 获得缓存的list对象
    41.      *
    42.      * @param key 缓存的键值
    43.      * @return 缓存键值对应的数据
    44.      */
    45.     public  List getCacheList(final String key)
    46.     {
    47.         return redisTemplate.opsForList().range(key, 0, -1);
    48.     }
    49.  
    50.  
    51. }

    响应体工具类 

    1. import lombok.Data;
    2.  
    3. import java.io.Serializable;
    4. @Data
    5. public class ResponseResult implements Serializable {
    6.     private Boolean success;
    7.     private Integer code;
    8.     private String msg;
    9.     private T data;
    10.  
    11.     public ResponseResult() {
    12.         this.success=true;
    13.         this.code = HttpCodeEnum.SUCCESS.getCode();
    14.         this.msg = HttpCodeEnum.SUCCESS.getMsg();
    15.     }
    16.  
    17.     public ResponseResult(Integer code, T data) {
    18.         this.code = code;
    19.         this.data = data;
    20.     }
    21.  
    22.     public ResponseResult(Integer code, String msg, T data) {
    23.         this.code = code;
    24.         this.msg = msg;
    25.         this.data = data;
    26.     }
    27.  
    28.     public ResponseResult(Integer code, String msg) {
    29.         this.code = code;
    30.         this.msg = msg;
    31.     }
    32.  
    33.  
    34.     public ResponseResult error(Integer code, String msg) {
    35.         this.success=false;
    36.         this.code = code;
    37.         this.msg = msg;
    38.         return this;
    39.     }
    40.  
    41.  
    42.  
    43.     public static ResponseResult ok(Object data) {
    44.         ResponseResult result = new ResponseResult();
    45.         result.setData(data);
    46.         return result;
    47.     }
    48.  
    49.  
    50. }

    controller层

    返回对应的页面 

    1. import org.springframework.stereotype.Controller;
    2. import org.springframework.web.bind.annotation.GetMapping;
    3. import org.springframework.web.bind.annotation.PathVariable;
    4. import org.springframework.web.bind.annotation.RequestMapping;
    5.  
    6. /**
    7.  * 返回对于页面
    8.  */
    9. @Controller
    10. @RequestMapping("/page")
    11. public class PageController {
    12.  
    13.     @GetMapping("/{path}")
    14.     public String toPage(@PathVariable String path) {
    15.         return path;
    16.     }
    17. }

    文件上传接口 

    1.  
    2. import com.example.demo.model.CheckResultVo;
    3. import com.example.demo.model.FileChunkDto;
    4. import com.example.demo.service.FileChunkService;
    5. import com.example.demo.service.FileStorageService;
    6. import com.example.demo.util.ResponseResult;
    7. import org.springframework.web.bind.annotation.*;
    8.  
    9.  
    10. import javax.annotation.Resource;
    11. import javax.servlet.http.HttpServletRequest;
    12. import javax.servlet.http.HttpServletResponse;
    13. import java.io.IOException;
    14.  
    15. /**
    16.  * 文件存储表(FileStorage)表控制层
    17.  */
    18. @RestController
    19. @RequestMapping("fileStorage")
    20. public class FileStorageController {
    21.     @Resource
    22.     private FileStorageService fileStorageService;
    23.     @Resource
    24.     private FileChunkService fileChunkService;
    25.  
    26.     /**
    27.      * 本接口为校验接口，即上传前，先根据本接口查询一下 服务器是否存在该文件
    28.      * @param dto 入参
    29.      * @return vo
    30.      */
    31.     @GetMapping("/upload")
    32.     public ResponseResult checkUpload(FileChunkDto dto) {
    33.         return ResponseResult.ok(fileChunkService.check(dto));
    34.     }
    35.  
    36.     /**
    37.      * 本接口为实际上传接口
    38.      * @param dto      入参
    39.      * @param response response 配合前端返回响应的状态码
    40.      * @return boolean
    41.      */
    42.     @PostMapping("/upload")
    43.     public ResponseResult upload(FileChunkDto dto, HttpServletResponse response) {
    44.         try {
    45.             Boolean status = fileStorageService.uploadFile(dto);
    46.             if (status) {
    47.                 return ResponseResult.ok("上传成功");
    48.             } else {
    49.                 response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
    50.                 return ResponseResult.error("上传失败");
    51.             }
    52.         } catch (Exception e) {
    53.             // 这个code 是根据前端组件的特性来的，也可以自己定义规则
    54.             response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
    55.             return ResponseResult.error("上传失败");
    56.         }
    57.     }
    58.  
    59.     /**
    60.      * 下载接口，这里只做了普通的下载
    61.      * @param request    req
    62.      * @param response   res
    63.      * @param identifier md5
    64.      * @throws IOException 异常
    65.      */
    66.     @GetMapping(value = "/download/{identifier}")
    67.     public void downloadByIdentifier(HttpServletRequest request, HttpServletResponse response, @PathVariable("identifier") String identifier) throws IOException {
    68.         fileStorageService.downloadByIdentifier(identifier, request, response);
    69.     }
    70. }
    71.

    前端部分

    下载插件

    vue.js
    element-ui.js
    axios.js
    vue-uploader.js
    spark-md5.min.js
    zh-CN.js

    页面部分

    页面主要结构 

    插件引入 

    1. html>
    2. <html xmlns:th="http://www.thymeleaf.org">
    3. <head th:fragment="base">
    4.     <meta charset="utf-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    6.     <script th:src="@{/plugins/vue.js}" type="text/javascript">script>
    7.     <script th:src="@{/plugins/element/element-ui.js}" type="text/javascript">script>
    8.     <link th:href="@{/plugins/element/css/element-ui.css}" rel="stylesheet" type="text/css">
    9.     <script th:src="@{/plugins/axios.js}" type="text/javascript">script>
    10.     <script th:src="@{/plugins/vue-uploader.js}" type="text/javascript">script>
    11.     <script th:src="@{/plugins/spark-md5.min.js}" type="text/javascript">script>
    12.     <script th:src="@{/plugins/element/zh-CN.js}">script>
    13.     <script type="text/javascript">
    14.         ELEMENT.locale(ELEMENT.lang.zhCN)
    15.         // 添加响应拦截器
    16.         axios.interceptors.response.use(response => {
    17.             if (response.request.responseType === 'blob') {
    18.                 return response
    19.             }
    20.             // 对响应数据做点什么
    21.             const res = response.data
    22.             if (!!res && res.code === 1) { // 公共处理失败请求
    23.                 ELEMENT.Message({message: "异常:" + res.msg, type: "error"})
    24.                 return Promise.reject(new Error(res.msg || 'Error'));
    25.             } else {
    26.                 return res
    27.             }
    28.         }, function (error) {
    29.             // 对响应错误做点什么
    30.             return Promise.reject(error);
    31.         });
    32.     script>
    33. head>
    34.  
    35. html>

    上传文件主页 

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>大文件上传title>
    6.     <head th:include="/base::base"><title>title>head>
    7.     <link href="upload.css" rel="stylesheet" type="text/css">
    8. head>
    9. <body>
    10.  
    11. <div id="app">
    12.     <uploader
    13.             ref="uploader"
    14.             :options="options"
    15.             :autoStart="false"
    16.             :file-status-text="fileStatusText"
    17.             @file-added="onFileAdded"
    18.             @file-success="onFileSuccess"
    19.             @file-error="onFileError"
    20.             @file-progress="onFileProgress"
    21.             class="uploader-example"
    22.     >
    23.         <uploader-unsupport>uploader-unsupport>
    24.         <uploader-drop>
    25.             <p>拖动文件到这里上传p>
    26.             <uploader-btn>选择文件uploader-btn>
    27.         uploader-drop>
    28.         <uploader-list>
    29.             <el-collapse v-model="activeName" accordion>
    30.                 <el-collapse-item title="文件列表" name="1">
    31.                     <ul class="file-list">
    32.                         <li v-for="file in uploadFileList" :key="file.id">
    33.                             <uploader-file :file="file" :list="true" ref="uploaderFile">
    34.                                 <div slot-scope="props" style="display: flex;align-items: center;height: 100%;">
    35.                                     <el-progress
    36.                                             style="width: 85%"
    37.                                             :stroke-width="18"
    38.                                             :show-text="true"
    39.                                             :text-inside="true"
    40.                                             :format="e=> showDetail(e,props)"
    41.                                             :percentage="percentage(props)"
    42.                                             :color="e=>progressColor(e,props)">
    43.                                     el-progress>
    44.                                     <el-button :icon="icon" circle v-if="props.paused || props.isUploading"
    45.                                                @click="pause(file)" size="mini">el-button>
    46.                                     <el-button icon="el-icon-close" circle @click="remove(file)"
    47.                                                size="mini">el-button>
    48.                                     <el-button icon="el-icon-download" circle v-if="props.isComplete"
    49.                                                @click="download(file)"
    50.                                                size="mini">el-button>
    51.                                 div>
    52.                             uploader-file>
    53.                         li>
    54.                         <div class="no-file" v-if="!uploadFileList.length">
    55.                             <i class="icon icon-empty-file">i> 暂无待上传文件
    56.                         div>
    57.                     ul>
    58.                 el-collapse-item>
    59.             el-collapse>
    60.         uploader-list>
    61.     uploader>
    62. div>
    63. <script>
    64.     // 分片大小，20MB
    65.     const CHUNK_SIZE = 20 * 1024 * 1024;
    66.     new Vue({
    67.         el: '#app',
    68.         data() {
    69.             return {
    70.                 options: {
    71.                     // 上传地址
    72.                     target: "/fileStorage/upload",
    73.                     // 是否开启服务器分片校验。默认为 true
    74.                     testChunks: true,
    75.                     // 真正上传的时候使用的 HTTP 方法,默认 POST
    76.                     uploadMethod: "post",
    77.                     // 分片大小
    78.                     chunkSize: CHUNK_SIZE,
    79.                     // 并发上传数，默认为 3
    80.                     simultaneousUploads: 3,
    81.                     /**
    82.                      * 判断分片是否上传，秒传和断点续传基于此方法
    83.                      * 这里根据实际业务来 用来判断哪些片已经上传过了 不用再重复上传了 [这里可以用来写断点续传！！！]
    84.                      * 检查某个文件块是否已经上传到服务器，并根据检查结果返回布尔值。
    85.                      * chunk 表示待检查的文件块，是一个对象类型包含 offset 和 blob 两个字段。offset 表示该块在文件中的偏移量blob 表示该块对应的二进制数据
    86.                      * message 则表示服务器返回的响应消息，是一个字符串类型。
    87.                      */
    88.                     checkChunkUploadedByResponse: (chunk, message) => {
    89.                         console.log("message", message)
    90.                         // message是后台返回
    91.                         let messageObj = JSON.parse(message);
    92.                         let dataObj = messageObj.data;
    93.                         if (dataObj.uploaded !== null) {
    94.                             return dataObj.uploaded;
    95.                         }
    96.                         // 判断文件或分片是否已上传，已上传返回 true
    97.                         // 这里的 uploadedChunks 是后台返回
    98.                         // 判断 data.uploadedChunks 数组（或空数组）中是否包含 chunk.offset + 1 的值。
    99.                         // chunk.offset + 1 表示当前文件块在整个文件中的排序位置（从 1 开始计数），
    100.                         // 如果该值存在于 data.uploadedChunks 中，则说明当前文件块已经上传过了，返回 true，否则返回 false。
    101.                         return (dataObj.uploadedChunks || []).indexOf(chunk.offset + 1) >= 0;
    102.                     },
    103.                     parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
    104.                         //格式化时间
    105.                         return parsedTimeRemaining
    106.                             .replace(/\syears?/, "年")
    107.                             .replace(/\days?/, "天")
    108.                             .replace(/\shours?/, "小时")
    109.                             .replace(/\sminutes?/, "分钟")
    110.                             .replace(/\sseconds?/, "秒");
    111.                     },
    112.                 },
    113.                 // 修改上传状态
    114.                 fileStatusTextObj: {
    115.                     success: "上传成功",
    116.                     error: "上传错误",
    117.                     uploading: "正在上传",
    118.                     paused: "停止上传",
    119.                     waiting: "等待中",
    120.                 },
    121.                 uploadFileList: [],
    122.                 collapse: true,
    123.                 activeName: 1,
    124.                 icon: `el-icon-video-pause`
    125.             }
    126.         },
    127.         methods: {
    128.             onFileAdded(file, event) {
    129.                 console.log("eeeee",event)
    130.                 // event.preventDefault();
    131.                 this.uploadFileList.push(file);
    132.                 console.log("file :>> ", file);
    133.                 // 有时 fileType为空，需截取字符
    134.                 console.log("文件类型：" + file.fileType + "文件大小：" + file.size + "B");
    135.                 // 1. todo 判断文件类型是否允许上传
    136.                 // 2. 计算文件 MD5 并请求后台判断是否已上传，是则取消上传
    137.                 console.log("校验MD5");
    138.                 this.getFileMD5(file, (md5) => {
    139.                     if (md5 !== "") {
    140.                         // 修改文件唯一标识
    141.                         file.uniqueIdentifier = md5;
    142.                         // 请求后台判断是否上传
    143.                         // 恢复上传
    144.                         file.resume();
    145.                     }
    146.                 });
    147.             },
    148.             onFileSuccess(rootFile, file, response, chunk) {
    149.                 console.log("上传成功", rootFile, file, response, chunk);
    150.                 // 这里可以做一些上传成功之后的事情，比如，如果后端需要合并的话，可以通知到后端合并
    151.             },
    152.             onFileError(rootFile, file, message, chunk) {
    153.                 console.log("上传出错：" + message, rootFile, file, message, chunk);
    154.             },
    155.             onFileProgress(rootFile, file, chunk) {
    156.                 console.log(`当前进度：${Math.ceil(file._prevProgress * 100)}%`);
    157.             },
    158.  
    159.             // 计算文件的MD5值
    160.             getFileMD5(file, callback) {
    161.                 let spark = new SparkMD5.ArrayBuffer();
    162.                 let fileReader = new FileReader();
    163.                 //获取文件分片对象（注意它的兼容性，在不同浏览器的写法不同）
    164.                 let blobSlice =
    165.                     File.prototype.slice ||
    166.                     File.prototype.mozSlice ||
    167.                     File.prototype.webkitSlice;
    168.                 // 当前分片下标
    169.                 let currentChunk = 0;
    170.                 // 分片总数(向下取整)
    171.                 let chunks = Math.ceil(file.size / CHUNK_SIZE);
    172.                 // MD5加密开始时间
    173.                 let startTime = new Date().getTime();
    174.                 // 暂停上传
    175.                 file.pause();
    176.                 loadNext();
    177.                 // fileReader.readAsArrayBuffer操作会触发onload事件
    178.                 fileReader.onload = function (e) {
    179.                     // console.log("currentChunk :>> ", currentChunk);
    180.                     // 通过 e.target.result 获取到当前分片的内容，并将其追加到 MD5 计算实例 spark 中，以便后续计算整个文件的 MD5 值。
    181.                     spark.append(e.target.result);
    182.                     // 通过比较当前分片的索引 currentChunk 是否小于总分片数 chunks 判断是否还有下一个分片需要读取。
    183.                     if (currentChunk < chunks) {
    184.                         // 如果存在下一个分片，则将当前分片索引递增并调用 loadNext() 函数加载下一个分片；
    185.                         currentChunk++;
    186.                         loadNext();
    187.                     } else {
    188.                         // 否则，表示所有分片已经读取完毕，可以进行最后的 MD5 计算。
    189.                         // 该文件的md5值
    190.                         let md5 = spark.end();
    191.                         console.log(
    192.                             `MD5计算完毕：${md5}，耗时：${new Date().getTime() - startTime} ms.`
    193.                         );
    194.                         // 回调传值md5
    195.                         callback(md5);
    196.                     }
    197.                 };
    198.                 fileReader.onerror = function () {
    199.                     this.$message.error("文件读取错误");
    200.                     file.cancel();
    201.                 };
    202.  
    203.                 // 加载下一个分片
    204.                 function loadNext() {
    205.                     // start 的计算方式为当前分片的索引乘以分片大小 CHUNK_SIZE
    206.                     const start = currentChunk * CHUNK_SIZE;
    207.                     // end 的计算方式为 start 加上 CHUNK_SIZE，但如果超过了文件的总大小，则取文件的大小作为结束位置。
    208.                     const end = start + CHUNK_SIZE >= file.size ? file.size : start + CHUNK_SIZE;
    209.                     // 文件分片操作，读取下一分片(fileReader.readAsArrayBuffer操作会触发onload事件)
    210.                     // 通过调用 blobSlice.call(file.file, start, end) 方法获取当前分片的 Blob 对象，即指定开始和结束位置的文件分片。
    211.                     // 接着，使用 fileReader.readAsArrayBuffer() 方法读取该 Blob 对象的内容，从而触发 onload 事件，继续进行文件的处理
    212.                     fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
    213.                 }
    214.             },
    215.             // 上传状态文本
    216.             fileStatusText(status, response) {
    217.                 if (status === "md5") {
    218.                     return "校验MD5";
    219.                 } else {
    220.                     return this.fileStatusTextObj[status];
    221.                 }
    222.             },
    223.  
    224.             // 点击暂停
    225.             pause(file, id) {
    226.                 console.log("file :>> ", file);
    227.                 console.log("id :>> ", id);
    228.                 if (file.paused) {
    229.                     file.resume();
    230.                     this.icon = 'el-icon-video-pause'
    231.                 } else {
    232.                     this.icon = 'el-icon-video-play'
    233.                     file.pause();
    234.                 }
    235.             },
    236.             // 点击删除
    237.  
    238.             remove(file) {
    239.                 this.uploadFileList.findIndex((item, index) => {
    240.                     if (item.id === file.id) {
    241.                         this.$nextTick(() => {
    242.                             this.uploadFileList.splice(index, 1);
    243.                         });
    244.                     }
    245.                 });
    246.             },
    247.             showDetail(percentage, props) {
    248.                 let fileName = props.file.name;
    249.                 let isComplete = props.isComplete
    250.                 let formatUpload = this.formatFileSize(props.uploadedSize, 2);
    251.                 let fileSize = `${props.formatedSize}`;
    252.                 let timeRemaining = !isComplete ? ` 剩余时间:${props.formatedTimeRemaining}` : ''
    253.                 let uploaded = !isComplete ? ` 已上传:${formatUpload} / ${fileSize}` : ` 大小:${fileSize}`
    254.                 let speed = !isComplete ? ` 速度:${props.formatedAverageSpeed}` : ''
    255.                 if (props.error) {
    256.                     return `${fileName} \t 上传失败`
    257.                 }
    258.                 return `${fileName} \t ${speed}  \t ${uploaded}  \t ${timeRemaining} \t  进度:${percentage} %`;
    259.             },
    260.             // 显示进度
    261.             percentage(props) {
    262.                 let progress = props.progress.toFixed(2) * 100;
    263.                 return progress - 1 < 0 ? 0 : progress;
    264.             },
    265.             // 控制下进度条的颜色 ，异常的情况下显示红色
    266.             progressColor(e, props) {
    267.                 if (props.error) {
    268.                     return `#f56c6c`
    269.                 }
    270.                 if (e > 0) {
    271.                     return `#1989fa`
    272.                 }
    273.             },
    274.             // 点击下载
    275.             download(file, id) {
    276.                 console.log("file:>> ", file);
    277.                 window.location.href = `/fileStorage/download/${file.uniqueIdentifier}`;
    278.             },
    279.             formatFileSize(bytes, decimalPoint = 2) {
    280.                 if (bytes == 0) return "0 Bytes";
    281.                 let k = 1000,
    282.                     sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
    283.                     i = Math.floor(Math.log(bytes) / Math.log(k));
    284.                 return (
    285.                     parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + " " + sizes[i]
    286.                 );
    287.             }
    288.  
    289.         },
    290.     })
    291. script>
    292. body>
    293. html>

    上传页面对应的样式 

    1.  
    2. .uploader-example {
    3.     width: 880px;
    4.     padding: 15px;
    5.     margin: 40px auto 0;
    6.     font-size: 12px;
    7.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    8. }
    9. .uploader-example .uploader-btn {
    10.     margin-right: 4px;
    11. }
    12. .uploader-example .uploader-list {
    13.     max-height: 440px;
    14.     overflow: auto;
    15.     overflow-x: hidden;
    16.     overflow-y: auto;
    17. }
    18.  
    19. #global-uploader {
    20.     position: fixed;
    21.     z-index: 20;
    22.     right: 15px;
    23.     bottom: 15px;
    24.     width: 550px;
    25. }
    26.  
    27. .uploader-file {
    28.     height: 90px;
    29. }
    30.  
    31. .uploader-file-meta {
    32.     display: none !important;
    33. }
    34.  
    35. .operate {
    36.     flex: 1;
    37.     text-align: right;
    38. }
    39.  
    40. .file-list {
    41.     position: relative;
    42.     height: 300px;
    43.     overflow-x: hidden;
    44.     overflow-y: auto;
    45.     background-color: #fff;
    46.     padding: 0px;
    47.     margin: 0 auto;
    48.     transition: all 0.5s;
    49. }
    50.  
    51. .uploader-file-size {
    52.     width: 15% !important;
    53. }
    54.  
    55. .uploader-file-status {
    56.     width: 32.5% !important;
    57.     text-align: center !important;
    58. }
    59.  
    60. li {
    61.     background-color: #fff;
    62.     list-style-type: none;
    63. }
    64.  
    65. .no-file {
    66.     position: absolute;
    67.     top: 50%;
    68.     left: 50%;
    69.     transform: translate(-50%, -50%);
    70.     font-size: 16px;
    71. }
    72.  
    73. .uploader-file-name {
    74.     width: 36% !important;
    75. }
    76.  
    77. .uploader-file-actions {
    78.     float: right !important;
    79. }
    80.  
    81.  
    82. /deep/ .el-progress-bar {
    83.     width: 95%;
    84. }

    测试

    访问localhost:7125/page/index.html

     选择上传文件

    上传成功

     上传文件目录

  • 相关阅读:
    Linux部署Spark 本地模式
    金仓数据库KingbaseES服务器应用参考手册--9. sys_test_fsync
    如何深入学习Java并发编程？
    IIS6.0 PUT上传漏洞
    JUC - 线程基础
    Python 变量类型
    计算机操作系统 第四章 存储器管理（1）
    C/C++数据结构——队列
    .\missyou-0.0.1-SNAPSHOT.jar中没有主清单属性
    企业搭建网站用哪种服务器
  • 原文地址：https://blog.csdn.net/qq_63431773/article/details/133563174