小封feng微信

微信号：QF_qingfeng1024
image.png

vue-simple-uploader介绍

vue-simple-uploader是基于 simple-uploader.js 封装的vue上传插件。它的优点包括且不限于以下几种：

  • 支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传
  • 可暂停、继续上传
  • 错误处理
  • 支持“秒传”，通过文件判断服务端是否已存在从而实现“秒传”
  • 分片上传
  • 支持进度、预估剩余时间、出错自动重试、重传等操作

springboot整合vue2-uploader文件分片上传、秒传、断点续传 - 图2

效果预览

image.png
image.png

完成服务端的创建

创建UploaderController类

UploaderController用于接口的对接，接口为三个方法：
checkChunkExist - 检查分片是否存在，如果分片存在则返回true，否则返回false并返回已上传的分片。
uploadChunk - 上传文件分片，上传的核心方法。
mergeChunks - 合并文件分片，当分片全部上传完成，进行分片的合并。

  1. package com.qingfeng.uploader.controller;
  3. import com.qingfeng.uploader.dto.FileChunkDTO;
  4. import com.qingfeng.uploader.dto.FileChunkResultDTO;
  5. import com.qingfeng.uploader.response.RestApiResponse;
  6. import com.qingfeng.uploader.service.IUploadService;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.web.bind.annotation.*;
  10. /**
  11.  * @ProjectName UploaderController
  12.  * @author Administrator
  13.  * @version 1.0.0
  14.  * @Description 附件分片上传
  15.  * @createTime 2022/4/13 0013 15:58
  16.  */
  17. @RestController
  18. @RequestMapping("upload")
  19. public class UploaderController {
  21.     @Autowired
  22.     private IUploadService uploadService;
  24.     /**
  25.      * 检查分片是否存在
  26.      *
  27.      * @return
  28.      */
  29.     @GetMapping("chunk")
  30.     public RestApiResponse<Object> checkChunkExist(FileChunkDTO chunkDTO) {
  31.         FileChunkResultDTO fileChunkCheckDTO;
  32.         try {
  33.             fileChunkCheckDTO = uploadService.checkChunkExist(chunkDTO);
  34.             return RestApiResponse.success(fileChunkCheckDTO);
  35.         } catch (Exception e) {
  36.             return RestApiResponse.error(e.getMessage());
  37.         }
  38.     }
  41.     /**
  42.      * 上传文件分片
  43.      *
  44.      * @param chunkDTO
  45.      * @return
  46.      */
  47.     @PostMapping("chunk")
  48.     public RestApiResponse<Object> uploadChunk(FileChunkDTO chunkDTO) {
  49.         try {
  50.             uploadService.uploadChunk(chunkDTO);
  51.             return RestApiResponse.success(chunkDTO.getIdentifier());
  52.         } catch (Exception e) {
  53.             return RestApiResponse.error(e.getMessage());
  54.         }
  55.     }
  57.     /**
  58.      * 请求合并文件分片
  59.      *
  60.      * @param chunkDTO
  61.      * @return
  62.      */
  63.     @PostMapping("merge")
  64.     public RestApiResponse<Object> mergeChunks(@RequestBody FileChunkDTO chunkDTO) {
  65.         try {
  66.             boolean success = uploadService.mergeChunk(chunkDTO.getIdentifier(), chunkDTO.getFilename(), chunkDTO.getTotalChunks());
  67.             return RestApiResponse.flag(success);
  68.         } catch (Exception e) {
  69.             return RestApiResponse.error(e.getMessage());
  70.         }
  71.     }
  73. }

创建IUploadService接口类

  1. package com.qingfeng.uploader.service;
  4. import com.qingfeng.framework.exception.GlobalExceptionHandler;
  5. import com.qingfeng.uploader.dto.FileChunkDTO;
  6. import com.qingfeng.uploader.dto.FileChunkResultDTO;
  8. import java.io.IOException;
  10. /**
  11.  * @ProjectName IUploadService
  12.  * @author Administrator
  13.  * @version 1.0.0
  14.  * @Description 附件分片上传
  15.  * @createTime 2022/4/13 0013 15:59
  16.  */
  17. public interface IUploadService {
  19.     /**
  20.      * 检查文件是否存在，如果存在则跳过该文件的上传，如果不存在，返回需要上传的分片集合
  21.      * @param chunkDTO
  22.      * @return
  23.      */
  24.     FileChunkResultDTO checkChunkExist(FileChunkDTO chunkDTO);
  27.     /**
  28.      * 上传文件分片
  29.      * @param chunkDTO
  30.      */
  31.     void uploadChunk(FileChunkDTO chunkDTO) throws IOException;
  34.     /**
  35.      * 合并文件分片
  36.      * @param identifier
  37.      * @param fileName
  38.      * @param totalChunks
  39.      * @return
  40.      * @throws IOException
  41.      */
  42.     boolean mergeChunk(String identifier,String fileName,Integer totalChunks)throws IOException;
  43. }

创建UploadServiceImpl接口实现类

UploadServiceImpl是整个附件分片上传的核心实现类，在UploadServiceImpl中实现了分片的存储，合并，判断等一系列操作。

  1. package com.qingfeng.uploader.service.impl;
  3. import com.qingfeng.uploader.dto.FileChunkDTO;
  4. import com.qingfeng.uploader.dto.FileChunkResultDTO;
  5. import com.qingfeng.uploader.service.IUploadService;
  6. import org.apache.tomcat.util.http.fileupload.IOUtils;
  7. import org.slf4j.Logger;
  8. import org.slf4j.LoggerFactory;
  9. import org.springframework.beans.factory.annotation.Autowired;
  10. import org.springframework.beans.factory.annotation.Value;
  11. import org.springframework.data.redis.core.RedisTemplate;
  12. import org.springframework.stereotype.Service;
  14. import java.io.*;
  15. import java.util.*;
  18. /**
  19.  * @ProjectName UploadServiceImpl
  20.  * @author Administrator
  21.  * @version 1.0.0
  22.  * @Description 附件分片上传
  23.  * @createTime 2022/4/13 0013 15:59
  24.  */
  25. @Service
  26. @SuppressWarnings("all")
  27. public class UploadServiceImpl implements IUploadService {
  29.     private Logger logger = LoggerFactory.getLogger(UploadServiceImpl.class);
  31.     @Autowired
  32.     private RedisTemplate<String, Object> redisTemplate;
  34.     @Value("${uploadFolder}")
  35.     private String uploadFolder;
  37.     /**
  38.      * 检查文件是否存在，如果存在则跳过该文件的上传，如果不存在，返回需要上传的分片集合
  39.      *
  40.      * @param chunkDTO
  41.      * @return
  42.      */
  43.     @Override
  44.     public FileChunkResultDTO checkChunkExist(FileChunkDTO chunkDTO) {
  45.         //1.检查文件是否已上传过
  46.         //1.1)检查在磁盘中是否存在
  47.         String fileFolderPath = getFileFolderPath(chunkDTO.getIdentifier());
  48.         logger.info("fileFolderPath-->{}", fileFolderPath);
  49.         String filePath = getFilePath(chunkDTO.getIdentifier(), chunkDTO.getFilename());
  50.         File file = new File(filePath);
  51.         boolean exists = file.exists();
  52.         //1.2)检查Redis中是否存在,并且所有分片已经上传完成。
  53.         Set<Integer> uploaded = (Set<Integer>) redisTemplate.opsForHash().get(chunkDTO.getIdentifier(), "uploaded");
  54.         if (uploaded != null && uploaded.size() == chunkDTO.getTotalChunks() && exists) {
  55.             return new FileChunkResultDTO(true);
  56.         }
  57.         File fileFolder = new File(fileFolderPath);
  58.         if (!fileFolder.exists()) {
  59.             boolean mkdirs = fileFolder.mkdirs();
  60.             logger.info("准备工作,创建文件夹,fileFolderPath:{},mkdirs:{}", fileFolderPath, mkdirs);
  61.         }
  62.         // 断点续传，返回已上传的分片
  63.         return new FileChunkResultDTO(false, uploaded);
  64.     }
  67.     /**
  68.      * 上传分片
  69.      *
  70.      * @param chunkDTO
  71.      */
  72.     @Override
  73.     public void uploadChunk(FileChunkDTO chunkDTO) {
  74.         //分块的目录
  75.         String chunkFileFolderPath = getChunkFileFolderPath(chunkDTO.getIdentifier());
  76.         logger.info("分块的目录 -> {}", chunkFileFolderPath);
  77.         File chunkFileFolder = new File(chunkFileFolderPath);
  78.         if (!chunkFileFolder.exists()) {
  79.             boolean mkdirs = chunkFileFolder.mkdirs();
  80.             logger.info("创建分片文件夹:{}", mkdirs);
  81.         }
  82.         //写入分片
  83.         try (
  84.                 InputStream inputStream = chunkDTO.getFile().getInputStream();
  85.                 FileOutputStream outputStream = new FileOutputStream(new File(chunkFileFolderPath + chunkDTO.getChunkNumber()))
  86.         ) {
  87.             IOUtils.copy(inputStream, outputStream);
  88.             logger.info("文件标识:{},chunkNumber:{}", chunkDTO.getIdentifier(), chunkDTO.getChunkNumber());
  89.             //将该分片写入redis
  90.             long size = saveToRedis(chunkDTO);
  91.         } catch (Exception e) {
  92.             e.printStackTrace();
  93.         }
  94.     }
  97.     @Override
  98.     public boolean mergeChunk(String identifier, String fileName, Integer totalChunks) throws IOException {
  99.         return mergeChunks(identifier, fileName, totalChunks);
  100.     }
  102.     /**
  103.      * 合并分片
  104.      *
  105.      * @param identifier
  106.      * @param filename
  107.      */
  108.     private boolean mergeChunks(String identifier, String filename, Integer totalChunks) {
  109.         String chunkFileFolderPath = getChunkFileFolderPath(identifier);
  110.         String filePath = getFilePath(identifier, filename);
  111.         // 检查分片是否都存在
  112.         if (checkChunks(chunkFileFolderPath, totalChunks)) {
  113.             File chunkFileFolder = new File(chunkFileFolderPath);
  114.             File mergeFile = new File(filePath);
  115.             File[] chunks = chunkFileFolder.listFiles();
  116.             //排序
  117.             List fileList = Arrays.asList(chunks);
  118.             Collections.sort(fileList, (Comparator<File>) (o1, o2) -> {
  119.                 return Integer.parseInt(o1.getName()) - (Integer.parseInt(o2.getName()));
  120.             });
  121.             try {
  122.                 RandomAccessFile randomAccessFileWriter = new RandomAccessFile(mergeFile, "rw");
  123.                 byte[] bytes = new byte[1024];
  124.                 for (File chunk : chunks) {
  125.                     RandomAccessFile randomAccessFileReader = new RandomAccessFile(chunk, "r");
  126.                     int len;
  127.                     while ((len = randomAccessFileReader.read(bytes)) != -1) {
  128.                         randomAccessFileWriter.write(bytes, 0, len);
  129.                     }
  130.                     randomAccessFileReader.close();
  131.                 }
  132.                 randomAccessFileWriter.close();
  133.             } catch (Exception e) {
  134.                 return false;
  135.             }
  136.             return true;
  137.         }
  138.         return false;
  139.     }
  141.     /**
  142.      * 检查分片是否都存在
  143.      * @param chunkFileFolderPath
  144.      * @param totalChunks
  145.      * @return
  146.      */
  147.     private boolean checkChunks(String chunkFileFolderPath, Integer totalChunks) {
  148.         try {
  149.             for (int i = 1; i <= totalChunks + 1; i++) {
  150.                 File file = new File(chunkFileFolderPath + File.separator + i);
  151.                 if (file.exists()) {
  152.                     continue;
  153.                 } else {
  154.                     return false;
  155.                 }
  156.             }
  157.         } catch (Exception e) {
  158.             return false;
  159.         }
  160.         return true;
  161.     }
  163.     /**
  164.      * 分片写入Redis
  165.      *
  166.      * @param chunkDTO
  167.      */
  168.     private synchronized long saveToRedis(FileChunkDTO chunkDTO) {
  169.         Set<Integer> uploaded = (Set<Integer>) redisTemplate.opsForHash().get(chunkDTO.getIdentifier(), "uploaded");
  170.         if (uploaded == null) {
  171.             uploaded = new HashSet<>(Arrays.asList(chunkDTO.getChunkNumber()));
  172.             HashMap<String, Object> objectObjectHashMap = new HashMap<>();
  173.             objectObjectHashMap.put("uploaded", uploaded);
  174.             objectObjectHashMap.put("totalChunks", chunkDTO.getTotalChunks());
  175.             objectObjectHashMap.put("totalSize", chunkDTO.getTotalSize());
  176. //            objectObjectHashMap.put("path", getFileRelativelyPath(chunkDTO.getIdentifier(), chunkDTO.getFilename()));
  177.             objectObjectHashMap.put("path", chunkDTO.getFilename());
  178.             redisTemplate.opsForHash().putAll(chunkDTO.getIdentifier(), objectObjectHashMap);
  179.         } else {
  180.             uploaded.add(chunkDTO.getChunkNumber());
  181.             redisTemplate.opsForHash().put(chunkDTO.getIdentifier(), "uploaded", uploaded);
  182.         }
  183.         return uploaded.size();
  184.     }
  186.     /**
  187.      * 得到文件的绝对路径
  188.      *
  189.      * @param identifier
  190.      * @param filename
  191.      * @return
  192.      */
  193.     private String getFilePath(String identifier, String filename) {
  194.         String ext = filename.substring(filename.lastIndexOf("."));
  195. //        return getFileFolderPath(identifier) + identifier + ext;
  196.         return uploadFolder + filename;
  197.     }
  199.     /**
  200.      * 得到文件的相对路径
  201.      *
  202.      * @param identifier
  203.      * @param filename
  204.      * @return
  205.      */
  206.     private String getFileRelativelyPath(String identifier, String filename) {
  207.         String ext = filename.substring(filename.lastIndexOf("."));
  208.         return "/" + identifier.substring(0, 1) + "/" +
  209.                 identifier.substring(1, 2) + "/" +
  210.                 identifier + "/" + identifier
  211.                 + ext;
  212.     }
  215.     /**
  216.      * 得到分块文件所属的目录
  217.      *
  218.      * @param identifier
  219.      * @return
  220.      */
  221.     private String getChunkFileFolderPath(String identifier) {
  222.         return getFileFolderPath(identifier) + "chunks" + File.separator;
  223.     }
  225.     /**
  226.      * 得到文件所属的目录
  227.      *
  228.      * @param identifier
  229.      * @return
  230.      */
  231.     private String getFileFolderPath(String identifier) {
  232.         return uploadFolder + identifier.substring(0, 1) + File.separator +
  233.                 identifier.substring(1, 2) + File.separator +
  234.                 identifier + File.separator;
  235. //        return uploadFolder;
  236.     }
  237. }

创建相关辅助类

创建FileChunkDTO

  1. package com.qingfeng.uploader.dto;
  3. import org.springframework.web.multipart.MultipartFile;
  5. /**
  6.  * @ProjectName FileChunkDTO
  7.  * @author Administrator
  8.  * @version 1.0.0
  9.  * @Description 附件分片上传
  10.  * @createTime 2022/4/13 0013 15:59
  11.  */
  12. public class FileChunkDTO {
  13.     /**
  14.      * 文件md5
  15.      */
  16.     private String identifier;
  17.     /**
  18.      * 分块文件
  19.      */
  20.     MultipartFile file;
  21.     /**
  22.      * 当前分块序号
  23.      */
  24.     private Integer chunkNumber;
  25.     /**
  26.      * 分块大小
  27.      */
  28.     private Long chunkSize;
  29.     /**
  30.      * 当前分块大小
  31.      */
  32.     private Long currentChunkSize;
  33.     /**
  34.      * 文件总大小
  35.      */
  36.     private Long totalSize;
  37.     /**
  38.      * 分块总数
  39.      */
  40.     private Integer totalChunks;
  41.     /**
  42.      * 文件名
  43.      */
  44.     private String filename;
  46.     public String getIdentifier() {
  47.         return identifier;
  48.     }
  50.     public void setIdentifier(String identifier) {
  51.         this.identifier = identifier;
  52.     }
  54.     public MultipartFile getFile() {
  55.         return file;
  56.     }
  58.     public void setFile(MultipartFile file) {
  59.         this.file = file;
  60.     }
  63.     public Integer getChunkNumber() {
  64.         return chunkNumber;
  65.     }
  67.     public void setChunkNumber(Integer chunkNumber) {
  68.         this.chunkNumber = chunkNumber;
  69.     }
  71.     public Long getChunkSize() {
  72.         return chunkSize;
  73.     }
  75.     public void setChunkSize(Long chunkSize) {
  76.         this.chunkSize = chunkSize;
  77.     }
  79.     public Long getCurrentChunkSize() {
  80.         return currentChunkSize;
  81.     }
  83.     public void setCurrentChunkSize(Long currentChunkSize) {
  84.         this.currentChunkSize = currentChunkSize;
  85.     }
  87.     public Long getTotalSize() {
  88.         return totalSize;
  89.     }
  91.     public void setTotalSize(Long totalSize) {
  92.         this.totalSize = totalSize;
  93.     }
  95.     public Integer getTotalChunks() {
  96.         return totalChunks;
  97.     }
  99.     public void setTotalChunks(Integer totalChunks) {
  100.         this.totalChunks = totalChunks;
  101.     }
  103.     public String getFilename() {
  104.         return filename;
  105.     }
  107.     public void setFilename(String filename) {
  108.         this.filename = filename;
  109.     }
  111.     @Override
  112.     public String toString() {
  113.         return "FileChunkDTO{" +
  114.                 "identifier='" + identifier + '\'' +
  115.                 ", file=" + file +
  116.                 ", chunkNumber=" + chunkNumber +
  117.                 ", chunkSize=" + chunkSize +
  118.                 ", currentChunkSize=" + currentChunkSize +
  119.                 ", totalSize=" + totalSize +
  120.                 ", totalChunks=" + totalChunks +
  121.                 ", filename='" + filename + '\'' +
  122.                 '}';
  123.     }
  124. }

创建FileChunkResultDTO

  1. package com.qingfeng.uploader.dto;
  3. import java.util.Set;
  5. /**
  6.  * @ProjectName FileChunkResultDTO
  7.  * @author Administrator
  8.  * @version 1.0.0
  9.  * @Description 附件分片上传
  10.  * @createTime 2022/4/13 0013 15:59
  11.  */
  12. public class FileChunkResultDTO {
  13.     /**
  14.      * 是否跳过上传
  15.      */
  16.     private Boolean skipUpload;
  18.     /**
  19.      * 已上传分片的集合
  20.      */
  21.     private Set<Integer> uploaded;
  23.     public Boolean getSkipUpload() {
  24.         return skipUpload;
  25.     }
  27.     public void setSkipUpload(Boolean skipUpload) {
  28.         this.skipUpload = skipUpload;
  29.     }
  31.     public Set<Integer> getUploaded() {
  32.         return uploaded;
  33.     }
  35.     public void setUploaded(Set<Integer> uploaded) {
  36.         this.uploaded = uploaded;
  37.     }
  40.     public FileChunkResultDTO(Boolean skipUpload, Set<Integer> uploaded) {
  41.         this.skipUpload = skipUpload;
  42.         this.uploaded = uploaded;
  43.     }
  45.     public FileChunkResultDTO(Boolean skipUpload) {
  46.         this.skipUpload = skipUpload;
  47.     }
  48. }

创建RestApiResponse

  1. package com.qingfeng.uploader.response;
  4. /**
  5.  * @ProjectName RestApiResponse
  6.  * @author Administrator
  7.  * @version 1.0.0
  8.  * @Description 附件分片上传
  9.  * @createTime 2022/4/13 0013 15:59
  10.  */
  11. public class RestApiResponse<T> {
  13.     /**
  14.      * 是否成功
  15.      */
  16.     private boolean success;
  18.     /**
  19.      * 响应数据
  20.      */
  21.     private T data;
  23.     public boolean isSuccess() {
  24.         return success;
  25.     }
  27.     public void setSuccess(boolean success) {
  28.         this.success = success;
  29.     }
  31.     public T getData() {
  32.         return data;
  33.     }
  35.     public void setData(T data) {
  36.         this.data = data;
  37.     }
  39.     public static <T> RestApiResponse<T> success(T data) {
  40.         RestApiResponse<T> result = new RestApiResponse<>();
  41.         result.success = true;
  42.         result.data = data;
  43.         return result;
  44.     }
  46.     public static <T> RestApiResponse<T> success() {
  47.         RestApiResponse<T> result = new RestApiResponse<>();
  48.         result.success = true;
  49.         return result;
  50.     }
  52.     public static <T> RestApiResponse<T> error(T data) {
  53.         RestApiResponse<T> result = new RestApiResponse<>();
  54.         result.success = false;
  55.         result.data = data;
  56.         return result;
  57.     }
  59.     public static <T> RestApiResponse<T> flag(boolean data) {
  60.         RestApiResponse<T> result = new RestApiResponse<>();
  61.         result.success = data;
  62.         return result;
  63.     }
  65. }

核心方法分析

1、检查分片是否存在

  • 检查目录下的文件是否存在。
  • 检查redis存储的分片是否存在。
  • 判断分片数量和总分片数量是否一致。

如果文件存在并且分片上传完毕，标识已经完成附件的上传，可以进行秒传操作。
如果文件不存在或者分片为上传完毕，则返回false并返回已经上传的分片信息。

  1.      /**
  2.      * 检查文件是否存在，如果存在则跳过该文件的上传，如果不存在，返回需要上传的分片集合
  3.      * @param chunkDTO
  4.      * @return
  5.      */ 
  6.     @Override
  7.     public FileChunkResultDTO checkChunkExist(FileChunkDTO chunkDTO) {
  8.         //1.检查文件是否已上传过
  9.         //1.1)检查在磁盘中是否存在
  10.         String fileFolderPath = getFileFolderPath(chunkDTO.getIdentifier());
  11.         logger.info("fileFolderPath-->{}", fileFolderPath);
  12.         String filePath = getFilePath(chunkDTO.getIdentifier(), chunkDTO.getFilename());
  13.         File file = new File(filePath);
  14.         boolean exists = file.exists();
  15.         //1.2)检查Redis中是否存在,并且所有分片已经上传完成。
  16.         Set<Integer> uploaded = (Set<Integer>) redisTemplate.opsForHash().get(chunkDTO.getIdentifier(), "uploaded");
  17.         if (uploaded != null && uploaded.size() == chunkDTO.getTotalChunks() && exists) {
  18.             return new FileChunkResultDTO(true);
  19.         }
  20.         File fileFolder = new File(fileFolderPath);
  21.         if (!fileFolder.exists()) {
  22.             boolean mkdirs = fileFolder.mkdirs();
  23.             logger.info("准备工作,创建文件夹,fileFolderPath:{},mkdirs:{}", fileFolderPath, mkdirs);
  24.         }
  25.         // 断点续传，返回已上传的分片
  26.         return new FileChunkResultDTO(false, uploaded);
  27.     }

2、上传附件分片

  • 判断目录是否存在，如果不存在则创建目录。
  • 进行切片的拷贝，将切片拷贝到指定的目录。

  • 将该分片写入redis

    1. /**
    2. * 上传分片
    3. * @param chunkDTO
    4. */
    5. @Override
    6. public void uploadChunk(FileChunkDTO chunkDTO) {
    7.    //分块的目录
    8.    String chunkFileFolderPath = getChunkFileFolderPath(chunkDTO.getIdentifier());
    9.    logger.info("分块的目录 -> {}", chunkFileFolderPath);
    10.    File chunkFileFolder = new File(chunkFileFolderPath);
    11.    if (!chunkFileFolder.exists()) {
    12.        boolean mkdirs = chunkFileFolder.mkdirs();
    13.        logger.info("创建分片文件夹:{}", mkdirs);
    14.    }
    15.    //写入分片
    16.    try (
    17.            InputStream inputStream = chunkDTO.getFile().getInputStream();
    18.            FileOutputStream outputStream = new FileOutputStream(new File(chunkFileFolderPath + chunkDTO.getChunkNumber()))
    19.    ) {
    20.        IOUtils.copy(inputStream, outputStream);
    21.        logger.info("文件标识:{},chunkNumber:{}", chunkDTO.getIdentifier(), chunkDTO.getChunkNumber());
    22.        //将该分片写入redis
    23.        long size = saveToRedis(chunkDTO);
    24.    } catch (Exception e) {
    25.        e.printStackTrace();
    26.    }
    27. }

    3、合并分片-生成文件

    1. @Override
    2. public boolean mergeChunk(String identifier, String fileName, Integer totalChunks) throws IOException {
    3.    return mergeChunks(identifier, fileName, totalChunks);
    4. }
    6. /**
    7. * 合并分片
    8. * @param identifier
    9. * @param filename
    10. */
    11. private boolean mergeChunks(String identifier, String filename, Integer totalChunks) {
    12.    String chunkFileFolderPath = getChunkFileFolderPath(identifier);
    13.    String filePath = getFilePath(identifier, filename);
    14.    // 检查分片是否都存在
    15.    if (checkChunks(chunkFileFolderPath, totalChunks)) {
    16.        File chunkFileFolder = new File(chunkFileFolderPath);
    17.        File mergeFile = new File(filePath);
    18.        File[] chunks = chunkFileFolder.listFiles();
    19.        //排序
    20.        List fileList = Arrays.asList(chunks);
    21.        Collections.sort(fileList, (Comparator<File>) (o1, o2) -> {
    22.            return Integer.parseInt(o1.getName()) - (Integer.parseInt(o2.getName()));
    23.        });
    24.        try {
    25.            RandomAccessFile randomAccessFileWriter = new RandomAccessFile(mergeFile, "rw");
    26.            byte[] bytes = new byte[1024];
    27.            for (File chunk : chunks) {
    28.                RandomAccessFile randomAccessFileReader = new RandomAccessFile(chunk, "r");
    29.                int len;
    30.                while ((len = randomAccessFileReader.read(bytes)) != -1) {
    31.                    randomAccessFileWriter.write(bytes, 0, len);
    32.                }
    33.                randomAccessFileReader.close();
    34.            }
    35.            randomAccessFileWriter.close();
    36.        } catch (Exception e) {
    37.            return false;
    38.        }
    39.        return true;
    40.    }
    41.    return false;
    42. }

    检查分片是否全部存在

    1. private boolean checkChunks(String chunkFileFolderPath, Integer totalChunks) {
    2.    try {
    3.        for (int i = 1; i <= totalChunks + 1; i++) {
    4.            File file = new File(chunkFileFolderPath + File.separator + i);
    5.            if (file.exists()) {
    6.                continue;
    7.            } else {
    8.                return false;
    9.            }
    10.        }
    11.    } catch (Exception e) {
    12.        return false;
    13.    }
    14.    return true;
    15. }

    读取分片列表

    1. File[] chunks = chunkFileFolder.listFiles();

    切片排序1、2/3、—-

    1. List fileList = Arrays.asList(chunks);
    2. Collections.sort(fileList, (Comparator<File>) (o1, o2) -> {
    3. return Integer.parseInt(o1.getName()) - (Integer.parseInt(o2.getName()));
    4. });

    切片合并，生成文件

    1. RandomAccessFile randomAccessFileWriter = new RandomAccessFile(mergeFile, "rw");
    2. byte[] bytes = new byte[1024];
    3. for (File chunk : chunks) {
    4. RandomAccessFile randomAccessFileReader = new RandomAccessFile(chunk, "r");
    5. int len;
    6. while ((len = randomAccessFileReader.read(bytes)) != -1) {
    7.    randomAccessFileWriter.write(bytes, 0, len);
    8. }
    9. randomAccessFileReader.close();
    10. }
    11. randomAccessFileWriter.close();

    4、分片写入redis

    判断切片是否已存在，如果未存在，则创建基础信息，并保存。

    1. /**
    2. * 分片写入Redis
    3. * @param chunkDTO
    4. */
    5. private synchronized long saveToRedis(FileChunkDTO chunkDTO) {
    6.    Set<Integer> uploaded = (Set<Integer>) redisTemplate.opsForHash().get(chunkDTO.getIdentifier(), "uploaded");
    7.    if (uploaded == null) {
    8.        uploaded = new HashSet<>(Arrays.asList(chunkDTO.getChunkNumber()));
    9.        HashMap<String, Object> objectObjectHashMap = new HashMap<>();
    10.        objectObjectHashMap.put("uploaded", uploaded);
    11.        objectObjectHashMap.put("totalChunks", chunkDTO.getTotalChunks());
    12.        objectObjectHashMap.put("totalSize", chunkDTO.getTotalSize());
    13. //            objectObjectHashMap.put("path", getFileRelativelyPath(chunkDTO.getIdentifier(), chunkDTO.getFilename()));
    14.        objectObjectHashMap.put("path", chunkDTO.getFilename());
    15.        redisTemplate.opsForHash().putAll(chunkDTO.getIdentifier(), objectObjectHashMap);
    16.    } else {
    17.        uploaded.add(chunkDTO.getChunkNumber());
    18.        redisTemplate.opsForHash().put(chunkDTO.getIdentifier(), "uploaded", uploaded);
    19.    }
    20.    return uploaded.size();
    21. }

完成vue2前端的创建

安装uploader和spark-md5的依赖

  1. npm install --save vue-simple-uploader
  2. npm install --save spark-md5

mainjs导入uploader

  1. import uploader from 'vue-simple-uploader'
  2. Vue.use(uploader)

创建uploader组件

  1. <template>
  2.   <div>
  3.     <uploader
  4.       :autoStart="false"
  5.       :options="options"
  6.       :file-status-text="statusText"
  7.       class="uploader-example"
  8.       @file-complete="fileComplete"
  9.       @complete="complete"
  10.       @file-success="fileSuccess"
  11.       @files-added="filesAdded"
  12.     >
  13.       <uploader-unsupport></uploader-unsupport>
  14.       <uploader-drop>
  15.         <p>将文件拖放到此处以上传</p>
  16.         <uploader-btn>选择文件</uploader-btn>
  17.         <uploader-btn :attrs="attrs">选择图片</uploader-btn>
  18.         <uploader-btn :directory="true">选择文件夹</uploader-btn>
  19.       </uploader-drop>
  20.       <!-- <uploader-list></uploader-list> -->
  21.       <uploader-files> </uploader-files>
  22.     </uploader>
  23.     <br />
  24.     <a-button @click="allStart()" :disabled="disabled">全部开始</a-button>
  25.     <a-button @click="allStop()" style="margin-left: 4px">全部暂停</a-button>
  26.     <a-button @click="allRemove()" style="margin-left: 4px">全部移除</a-button>
  27.   </div>
  28. </template>
  30. <script>
  31. import axios from "axios";
  32. import SparkMD5 from "spark-md5";
  33. import storage from "store";
  34. import { ACCESS_TOKEN } from '@/store/mutation-types'
  35. export default {
  36.   data() {
  37.     return {
  38.       skip: false,
  39.       options: {
  40.         target: "//localhost:8888/upload/chunk",
  41.         // 开启服务端分片校验功能
  42.         testChunks: true,
  43.         parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
  44.           return parsedTimeRemaining
  45.             .replace(/\syears?/, "年")
  46.             .replace(/\days?/, "天")
  47.             .replace(/\shours?/, "小时")
  48.             .replace(/\sminutes?/, "分钟")
  49.             .replace(/\sseconds?/, "秒");
  50.         },
  51.         // 服务器分片校验函数
  52.         checkChunkUploadedByResponse: (chunk, message) => {
  53.           const result = JSON.parse(message);
  54.           if (result.data.skipUpload) {
  55.             this.skip = true;
  56.             return true;
  57.           }
  58.           return (result.data.uploaded || []).indexOf(chunk.offset + 1) >= 0;
  59.         },
  60.         headers: {
  61.           // 在header中添加的验证，请根据实际业务来
  62.           "Access-Token": storage.get(ACCESS_TOKEN),
  63.         },
  64.       },
  65.       attrs: {
  66.         accept: "image/*",
  67.       },
  68.       statusText: {
  69.         success: "上传成功",
  70.         error: "上传出错了",
  71.         uploading: "上传中...",
  72.         paused: "暂停中...",
  73.         waiting: "等待中...",
  74.         cmd5: "计算文件MD5中...",
  75.       },
  76.       fileList: [],
  77.       disabled: true,
  78.     };
  79.   },
  80.   watch: {
  81.     fileList(o, n) {
  82.       this.disabled = false;
  83.     },
  84.   },
  85.   methods: {
  86.     fileSuccess(rootFile, file, response, chunk) {
  87.       // console.log(rootFile);
  88.       // console.log(file);
  89.       // console.log(message);
  90.       // console.log(chunk);
  91.       const result = JSON.parse(response);
  92.       console.log(result.success, this.skip);
  94.       if (result.success && !this.skip) {
  95.         axios
  96.           .post(
  97.             "http://127.0.0.1:8888/upload/merge",
  98.             {
  99.               identifier: file.uniqueIdentifier,
  100.               filename: file.name,
  101.               totalChunks: chunk.offset,
  102.             },
  103.             {
  104.               headers: { "Access-Token": storage.get(ACCESS_TOKEN) }
  105.             }
  106.           )
  107.           .then((res) => {
  108.             if (res.data.success) {
  109.               console.log("上传成功");
  110.             } else {
  111.               console.log(res);
  112.             }
  113.           })
  114.           .catch(function (error) {
  115.             console.log(error);
  116.           });
  117.       } else {
  118.         console.log("上传成功，不需要合并");
  119.       }
  120.       if (this.skip) {
  121.         this.skip = false;
  122.       }
  123.     },
  124.     fileComplete(rootFile) {
  125.       // 一个根文件（文件夹）成功上传完成。
  126.       // console.log("fileComplete", rootFile);
  127.       // console.log("一个根文件（文件夹）成功上传完成。");
  128.     },
  129.     complete() {
  130.       // 上传完毕。
  131.       // console.log("complete");
  132.     },
  133.     filesAdded(file, fileList, event) {
  134.       // console.log(file);
  135.       file.forEach((e) => {
  136.         this.fileList.push(e);
  137.         this.computeMD5(e);
  138.       });
  139.     },
  140.     computeMD5(file) {
  141.       let fileReader = new FileReader();
  142.       let time = new Date().getTime();
  143.       let blobSlice =
  144.         File.prototype.slice ||
  145.         File.prototype.mozSlice ||
  146.         File.prototype.webkitSlice;
  147.       let currentChunk = 0;
  148.       const chunkSize = 1024 * 1024;
  149.       let chunks = Math.ceil(file.size / chunkSize);
  150.       let spark = new SparkMD5.ArrayBuffer();
  151.       // 文件状态设为"计算MD5"
  152.       file.cmd5 = true; //文件状态为“计算md5...”
  153.       file.pause();
  154.       loadNext();
  155.       fileReader.onload = (e) => {
  156.         spark.append(e.target.result);
  157.         if (currentChunk < chunks) {
  158.           currentChunk++;
  159.           loadNext();
  160.           // 实时展示MD5的计算进度
  161.           console.log(
  162.             `第${currentChunk}分片解析完成, 开始第${
  163.               currentChunk + 1
  164.             } / ${chunks}分片解析`
  165.           );
  166.         } else {
  167.           let md5 = spark.end();
  168.           console.log(
  169.             `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
  170.               file.size
  171.             } 用时：${new Date().getTime() - time} ms`
  172.           );
  173.           spark.destroy(); //释放缓存
  174.           file.uniqueIdentifier = md5; //将文件md5赋值给文件唯一标识
  175.           file.cmd5 = false; //取消计算md5状态
  176.           file.resume(); //开始上传
  177.         }
  178.       };
  179.       fileReader.onerror = function () {
  180.         this.error(`文件${file.name}读取出错，请检查该文件`);
  181.         file.cancel();
  182.       };
  183.       function loadNext() {
  184.         let start = currentChunk * chunkSize;
  185.         let end =
  186.           start + chunkSize >= file.size ? file.size : start + chunkSize;
  187.         fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
  188.       }
  189.     },
  190.     allStart() {
  191.       console.log(this.fileList);
  192.       this.fileList.map((e) => {
  193.         if (e.paused) {
  194.           e.resume();
  195.         }
  196.       });
  197.     },
  198.     allStop() {
  199.       console.log(this.fileList);
  200.       this.fileList.map((e) => {
  201.         if (!e.paused) {
  202.           e.pause();
  203.         }
  204.       });
  205.     },
  206.     allRemove() {
  207.       this.fileList.map((e) => {
  208.         e.cancel();
  209.       });
  210.       this.fileList = [];
  211.     },
  212.   },
  213. };
  214. </script>
  216. <style>
  217. .uploader-example {
  218.   width: 100%;
  219.   padding: 15px;
  220.   margin: 0px auto 0;
  221.   font-size: 12px;
  222.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  223. }
  224. .uploader-example .uploader-btn {
  225.   margin-right: 4px;
  226. }
  227. .uploader-example .uploader-list {
  228.   max-height: 440px;
  229.   overflow: auto;
  230.   overflow-x: hidden;
  231.   overflow-y: auto;
  232. }
  233. </style>

Uploader组件使用

  1. <template>
  2.   <div>
  3.     <a-button @click="uploadFile"> 资源上传 </a-button>
  4.     <a-drawer
  5.       title="资源上传"
  6.       placement="right"
  7.       width="640"
  8.       :closable="false"
  9.       :visible="visible"
  10.       @close="onClose"
  11.     >
  12.       <upload></upload>
  13.     </a-drawer>
  14.   </div>
  15. </template>
  17. <script>
  18. import Upload from "@/components/Upload/Index";
  19. export default {
  20.   name: "WelcomePage",
  21.   data() {
  22.     return {
  23.       visible: true,
  24.     };
  25.   },
  26.   components: {
  27.     Upload,
  28.   },
  29.   methods: {
  30.     uploadFile() {
  31.       this.visible = true;
  32.     },
  33.     onClose() {
  34.       this.visible = false;
  35.     }
  36.   },
  37. };
  38. </script>
  40. <style lang="less" scoped>
  41. </style>

核心方法分析

  1. <uploader
  2.       :autoStart="false"
  3.       :options="options"
  4.       :file-status-text="statusText"
  5.       class="uploader-example"
  6.       @file-complete="fileComplete"
  7.       @complete="complete"
  8.       @file-success="fileSuccess"
  9.       @files-added="filesAdded"
  10.     >
  11.       <uploader-unsupport></uploader-unsupport>
  12.       <uploader-drop>
  13.         <p>将文件拖放到此处以上传</p>
  14.         <uploader-btn>选择文件</uploader-btn>
  15.         <uploader-btn :attrs="attrs">选择图片</uploader-btn>
  16.         <uploader-btn :directory="true">选择文件夹</uploader-btn>
  17.       </uploader-drop>
  18.       <!-- <uploader-list></uploader-list> -->
  19.       <uploader-files> </uploader-files>
  20.     </uploader>
  21.     <br />
  22.     <a-button @click="allStart()" :disabled="disabled">全部开始</a-button>
  23.     <a-button @click="allStop()" style="margin-left: 4px">全部暂停</a-button>
  24.     <a-button @click="allRemove()" style="margin-left: 4px">全部移除</a-button>

options参数分析

参考 simple-uploader.js 配置。此外，你可以有如下配置项可选：
parseTimeRemaining(timeRemaining, parsedTimeRemaining) {Function}用于格式化你想要剩余时间，一般可以用来做多语言。参数：

  • timeRemaining{Number}, 剩余时间，秒为单位

  • parsedTimeRemaining{String}, 默认展示的剩余时间内容，你也可以这样做替换使用：

    1. parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
    2. return parsedTimeRemaining
    3. .replace(/\syears?/, '年')
    4. .replace(/\days?/, '天')
    5. .replace(/\shours?/, '小时')
    6. .replace(/\sminutes?/, '分钟')
    7. .replace(/\sseconds?/, '秒')
    8. }

    categoryMap {Object}
    文件类型 map，默认：

    1. {
    2. image: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'],
    3. video: ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv'],
    4. audio: ['mp3', 'wav', 'wma', 'ogg', 'aac', 'flac'],
    5. document: ['doc', 'txt', 'docx', 'pages', 'epub', 'pdf', 'numbers', 'csv', 'xls', 'xlsx', 'keynote', 'ppt', 'pptx']
    6. }

    autoStart {Boolean}默认 true, 是否选择文件后自动开始上传。
    fileStatusText {Object}默认：

    1. {
    2. success: 'success',
    3. error: 'error',
    4. uploading: 'uploading',
    5. paused: 'paused',
    6. waiting: 'waiting'
    7. }

    用于转换文件上传状态文本映射对象。
    0.6.0 版本之后，fileStatusText 可以设置为一个函数，参数为 (status, response = null)， 第一个 status 为状态，第二个为响应内容，默认 null，示例：

    1. fileStatusText(status, response) {
    2. const statusTextMap = {
    3. uploading: 'uploading',
    4. paused: 'paused',
    5. waiting: 'waiting'
    6. }
    7. if (status === 'success' || status === 'error') {
    8. // 只有status为success或者error的时候可以使用 response
    10. // eg:
    11. // return response data ?
    12. return response.data
    13. } else {
    14. return statusTextMap[status]
    15. }
    16. }

    fileComplete方法

    1. fileComplete(rootFile) {
    2. // 一个根文件（文件夹）成功上传完成。
    3. // console.log("fileComplete", rootFile);
    4. // console.log("一个根文件（文件夹）成功上传完成。");
    5. },

    complete方法

    1. complete() {
    2.  // 上传完毕。
    3.  // console.log("complete");
    4. },

    fileSuccess方法

    文件上传成功，进行合并。

    1. fileSuccess(rootFile, file, response, chunk) {
    2.  // console.log(rootFile);
    3.  // console.log(file);
    4.  // console.log(message);
    5.  // console.log(chunk);
    6.  const result = JSON.parse(response);
    7.  console.log(result.success, this.skip);
    9.  if (result.success && !this.skip) {
    10.    axios
    11.      .post(
    12.        "http://127.0.0.1:8888/upload/merge",
    13.        {
    14.          identifier: file.uniqueIdentifier,
    15.          filename: file.name,
    16.          totalChunks: chunk.offset,
    17.        },
    18.        {
    19.          headers: { "Access-Token": storage.get(ACCESS_TOKEN) }
    20.        }
    21.      )
    22.      .then((res) => {
    23.        if (res.data.success) {
    24.          console.log("上传成功");
    25.        } else {
    26.          console.log(res);
    27.        }
    28.      })
    29.      .catch(function (error) {
    30.        console.log(error);
    31.      });
    32.  } else {
    33.    console.log("上传成功，不需要合并");
    34.  }
    35.  if (this.skip) {
    36.    this.skip = false;
    37.  }
    38. },

    filesAdded方法

    文件选择完成，进行文件分片处理。

    1. filesAdded(file, fileList, event) {
    2.  // console.log(file);
    3.  file.forEach((e) => {
    4.    this.fileList.push(e);
    5.    this.computeMD5(e);
    6.  });
    7. },
    8. computeMD5(file) {
    9.  let fileReader = new FileReader();
    10.  let time = new Date().getTime();
    11.  let blobSlice =
    12.    File.prototype.slice ||
    13.    File.prototype.mozSlice ||
    14.    File.prototype.webkitSlice;
    15.  let currentChunk = 0;
    16.  const chunkSize = 1024 * 1024;
    17.  let chunks = Math.ceil(file.size / chunkSize);
    18.  let spark = new SparkMD5.ArrayBuffer();
    19.  // 文件状态设为"计算MD5"
    20.  file.cmd5 = true; //文件状态为“计算md5...”
    21.  file.pause();
    22.  loadNext();
    23.  fileReader.onload = (e) => {
    24.    spark.append(e.target.result);
    25.    if (currentChunk < chunks) {
    26.      currentChunk++;
    27.      loadNext();
    28.      // 实时展示MD5的计算进度
    29.      console.log(
    30.        `第${currentChunk}分片解析完成, 开始第${
    31.          currentChunk + 1
    32.        } / ${chunks}分片解析`
    33.      );
    34.    } else {
    35.      let md5 = spark.end();
    36.      console.log(
    37.        `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
    38.          file.size
    39.        } 用时：${new Date().getTime() - time} ms`
    40.      );
    41.      spark.destroy(); //释放缓存
    42.      file.uniqueIdentifier = md5; //将文件md5赋值给文件唯一标识
    43.      file.cmd5 = false; //取消计算md5状态
    44.      file.resume(); //开始上传
    45.    }
    46.  };
    47.  fileReader.onerror = function () {
    48.    this.error(`文件${file.name}读取出错，请检查该文件`);
    49.    file.cancel();
    50.  };
    51.  function loadNext() {
    52.    let start = currentChunk * chunkSize;
    53.    let end =
    54.      start + chunkSize >= file.size ? file.size : start + chunkSize;
    55.    fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
    56.  }
    57. },

    allStart全部开始

    1. allStart() {
    2. console.log(this.fileList);
    3. this.fileList.map((e) => {
    4. if (e.paused) {
    5.  e.resume();
    6. }
    7. });
    8. },

    allStop全部停止

    1. allStop() {
    2.  console.log(this.fileList);
    3.  this.fileList.map((e) => {
    4.    if (!e.paused) {
    5.      e.pause();
    6.    }
    7.  });
    8. },

    allRemove全部移除

    1. allRemove() {
    2.  this.fileList.map((e) => {
    3.    e.cancel();
    4.  });
    5.  this.fileList = [];
    6. },

    文件分片

    vue-simple-uploader自动将文件进行分片，在options的chunkSize中可以设置每个分片的大小。
    如图：对于大文件来说，会发送多个请求，在设置testChunks为true后（在插件中默认就是true），会发送与服务器进行分片校验的请求，下面的第一个get请求就是该请求；后面的每一个post请求都是上传分片的请求
    image.png
    看一下发送给服务端的参数，其中chunkNumber表示当前是第几个分片，totalChunks代表所有的分片数，这两个参数都是都是插件根据你设置的chunkSize来计算的。
    springboot整合vue2-uploader文件分片上传、秒传、断点续传 - 图6
    需要注意的就是在最后文件上传成功的事件中，通过后台返回的字段，来判断是否要再给后台发送一个文件合并的请求。

    MD5的计算过程

    断点续传及秒传的基础是要计算文件的MD5，这是文件的唯一标识，然后服务器根据MD5进行判断，是进行秒传还是断点续传。
    在file-added事件之后，就计算MD5，我们最终的目的是将计算出来的MD5加到参数里传给后台，然后继续文件上传的操作，详细的思路步骤是：

  1. 把uploader组件的autoStart设为false，即选择文件后不会自动开始上传
  2. 先通过 file.pause()暂停文件，然后通过H5的FileReader接口读取文件
  3. 将异步读取文件的结果进行MD5，这里我用的加密工具是spark-md5，你可以通过npm install spark-md5 —save来安装，也可以使用其他MD5加密工具。
  4. file有个属性是uniqueIdentifier，代表文件唯一标示，我们把计算出来的MD5赋值给这个属性 file.uniqueIdentifier = md5，这就实现了我们最终的目的。
  5. 通过file.resume()开始/继续文件上传。
    1. computeMD5(file) {
    2.    let fileReader = new FileReader();
    3.    let time = new Date().getTime();
    4.    let blobSlice =
    5.      File.prototype.slice ||
    6.      File.prototype.mozSlice ||
    7.      File.prototype.webkitSlice;
    8.    let currentChunk = 0;
    9.    const chunkSize = 1024 * 1024;
    10.    let chunks = Math.ceil(file.size / chunkSize);
    11.    let spark = new SparkMD5.ArrayBuffer();
    12.    // 文件状态设为"计算MD5"
    13.    file.cmd5 = true; //文件状态为“计算md5...”
    14.    file.pause();
    15.    loadNext();
    16.    fileReader.onload = (e) => {
    17.      spark.append(e.target.result);
    18.      if (currentChunk < chunks) {
    19.        currentChunk++;
    20.        loadNext();
    21.        // 实时展示MD5的计算进度
    22.        console.log(
    23.          `第${currentChunk}分片解析完成, 开始第${
    24.            currentChunk + 1
    25.          } / ${chunks}分片解析`
    26.        );
    27.      } else {
    28.        let md5 = spark.end();
    29.        console.log(
    30.          `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
    31.            file.size
    32.          } 用时：${new Date().getTime() - time} ms`
    33.        );
    34.        spark.destroy(); //释放缓存
    35.        file.uniqueIdentifier = md5; //将文件md5赋值给文件唯一标识
    36.        file.cmd5 = false; //取消计算md5状态
    37.        file.resume(); //开始上传
    38.      }
    39.    };
    40.    fileReader.onerror = function () {
    41.      this.error(`文件${file.name}读取出错，请检查该文件`);
    42.      file.cancel();
    43.    };
    44.    function loadNext() {
    45.      let start = currentChunk * chunkSize;
    46.      let end =
    47.        start + chunkSize >= file.size ? file.size : start + chunkSize;
    48.      fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
    49.    }
    50.  },
    给file的uniqueIdentifier 属性赋值后，请求中的identifier即是我们计算出来的MD5
    springboot整合vue2-uploader文件分片上传、秒传、断点续传 - 图7

    秒传及断点续传

    在计算完MD5后，我们就能谈断点续传及秒传的概念了。
    服务器根据前端传过来的MD5去判断是否可以进行秒传或断点续传：
  • a. 服务器发现文件已经完全上传成功，则直接返回秒传的标识。
  • b. 服务器发现文件上传过分片信息，则返回这些分片信息，告诉前端继续上传，即断点续传。

在每次上传过程的最开始，vue-simple-uploader会发送一个get请求，来问服务器我哪些分片已经上传过了，这个请求返回的结果也有几种可能：

  • a. 如果是秒传，在请求结果中会有相应的标识，比如我这里是skipUpload为true，且返回了url，代表服务器告诉我们这个文件已经有了，我直接把url给你，你不用再传了，这就是秒传。
  • b. 如果后台返回了分片信息，这是断点续传。如图，返回的数据中有个uploaded的字段，代表这些分片是已经上传过的了，插件会自动跳过这些分片的上传。

图b1：断点续传情况下后台返回值
springboot整合vue2-uploader文件分片上传、秒传、断点续传 - 图8

前端做分片检验：checkChunkUploadedByResponse

插件自己是不会判断哪个需要跳过的，在代码中由options中的checkChunkUploadedByResponse控制，它会根据 XHR 响应内容检测每个块是否上传成功了，成功的分片直接跳过上传
你要在这个函数中进行处理，可以跳过的情况下返回true即可。

  1. checkChunkUploadedByResponse: function (chunk, message) {
  2.      let objMessage = JSON.parse(message);
  3.      if (objMessage.skipUpload) {
  4.          return true;
  5.      }
  7.      return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
  8. },

注：skipUpload 和 uploaded 是我和后台商议的字段，你要按照后台实际返回的字段名来。

优化MD5计算

原uploader中计算MD5的方式为对整个文件直接计算MD5，很吃内存，容易导致浏览器崩溃
我改成了通过分片读取文件的方式计算MD5，防止直接读取大文件时因内存占用过大导致的网页卡顿、崩溃。

自定义的状态

（之前我就封装了几种自定义状态，最近总有小伙伴问怎么没有“校验MD5”，“合并中”这些状态，我就把我的方法写出来了，方式很笨，但是能实现效果）
插件原本只支持了success、error、uploading、paused、waiting这几种状态，
由于业务需求，我额外增加了“校验MD5”、“合并中”、“转码中”、“上传失败”这几种自定义的状态
由于前几种状态是插件已经封装好的，我不能改源码，只能用比较hack的方式：
当自定义状态开始时，要手动调一下statusSet方法，生成一个p标签盖在原本的状态上面；当自定义状态结束时，还要手动调用statusRemove移除该标签。

  1. this.statusSet(file.id, 'merging');
  2. this.statusRemove(file.id);