devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

springboot整合vue2-uploader文件分片上传、秒传、断点续传_vue-simple-uploader 怎么判断进行分片合并

作者：小小林熬夜学编程 | 2024-02-07 17:52:08

赞

踩

vue-simple-uploader 怎么判断进行分片合并

1：vue-simple-uploader介绍

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

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

2：图片便于理解：

秒传：（将文件使用MD5加密，生成一个串，我们拿到这个串到redis 中查看是否存在）

3：服务端Java代码

3.1  UploaderController

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

3.2  IUploadService  接口

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

3.3 UploadServiceImpl

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

3.4  FileChunkDTO

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

3.5 FileChunkResultDTO

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

3.6 Result

  1. package com.xialj.demoend.common;
  2.  
  3. import io.swagger.annotations.ApiModel;
  4. import io.swagger.annotations.ApiModelProperty;
  5. import lombok.Data;
  6. /**
  7.  * @Author 
  8.  * @Date Created in  2023/2/23 17:25
  9.  * @DESCRIPTION:  全局统一返回结果
  10.  * @Version V1.0
  11.  */
  12. @Data
  13. @ApiModel(value = "全局统一返回结果")
  14. @SuppressWarnings("all")
  15. public class Result<T> {
  16.  
  17.     @ApiModelProperty(value = "返回码")
  18.     private Integer code;
  19.  
  20.     @ApiModelProperty(value = "返回消息")
  21.     private String message;
  22.  
  23.     @ApiModelProperty(value = "返回数据")
  24.     private T data;
  25.     private Long total;
  26.  
  27.     public Result(){}
  28.  
  29.     protected static <T> Result<T> build(T data) {
  30.         Result<T> result = new Result<T>();
  31.         if (data != null)
  32.             result.setData(data);
  33.         return result;
  34.     }
  35.  
  36.     public static <T> Result<T> build(T body, ResultCodeEnum resultCodeEnum) {
  37.         Result<T> result = build(body);
  38.         result.setCode(resultCodeEnum.getCode());
  39.         result.setMessage(resultCodeEnum.getMessage());
  40.         return result;
  41.     }
  42.  
  43.     public static <T> Result<T> build(Integer code, String message) {
  44.         Result<T> result = build(null);
  45.         result.setCode(code);
  46.         result.setMessage(message);
  47.         return result;
  48.     }
  49.  
  50.     public static<T> Result<T> ok(){
  51.         return Result.ok(null);
  52.     }
  53.  
  54.     /**
  55.      * 操作成功
  56.      * @param data
  57.      * @param <T>
  58.      * @return
  59.      */
  60.     public static<T> Result<T> ok(T data){
  61.         Result<T> result = build(data);
  62.         return build(data, ResultCodeEnum.SUCCESS);
  63.     }
  64.  
  65.     public static<T> Result<T> fail(){
  66.         return Result.fail(null);
  67.     }
  68.  
  69.     /**
  70.      * 操作失败
  71.      * @param data
  72.      * @param <T>
  73.      * @return
  74.      */
  75.     public static<T> Result<T> fail(T data){
  76.         Result<T> result = build(data);
  77.         return build(data, ResultCodeEnum.FAIL);
  78.     }
  79.  
  80.     public Result<T> message(String msg){
  81.         this.setMessage(msg);
  82.         return this;
  83.     }
  84.  
  85.     public Result<T> code(Integer code){
  86.         this.setCode(code);
  87.         return this;
  88.     }
  89.  
  90.     public boolean isOk() {
  91.         if(this.getCode().intValue() == ResultCodeEnum.SUCCESS.getCode().intValue()) {
  92.             return true;
  93.         }
  94.         return false;
  95.     }
  96. }

3.6 ResultCodeEnum

  1. package com.xialj.demoend.common;
  2.  
  3. import lombok.Getter;
  4.  
  5. /**
  6.    * @Author 
  7.    * @Date Created in  2023/2/23 17:25
  8.    * @DESCRIPTION:  统一返回结果状态信息类
  9.    * @Version V1.0
  10.    */
  11. @Getter
  12. @SuppressWarnings("all")
  13. public enum ResultCodeEnum {
  14.  
  15.     SUCCESS(200,"成功"),
  16.     FAIL(201, "失败"),
  17.     PARAM_ERROR( 202, "参数不正确"),
  18.     SERVICE_ERROR(203, "服务异常"),
  19.     DATA_ERROR(204, "数据异常"),
  20.     DATA_UPDATE_ERROR(205, "数据版本异常"),
  21.  
  22.     LOGIN_AUTH(208, "未登陆"),
  23.     PERMISSION(209, "没有权限"),
  24.  
  25.     CODE_ERROR(210, "验证码错误"),
  26. //    LOGIN_MOBLE_ERROR(211, "账号不正确"),
  27.     LOGIN_DISABLED_ERROR(212, "改用户已被禁用"),
  28.     REGISTER_MOBLE_ERROR(213, "手机号码格式不正确"),
  29.     REGISTER_MOBLE_ERROR_NULL(214, "手机号码为空"),
  30.  
  31.     LOGIN_AURH(214, "需要登录"),
  32.     LOGIN_ACL(215, "没有权限"),
  33.  
  34.     URL_ENCODE_ERROR( 216, "URL编码失败"),
  35.     ILLEGAL_CALLBACK_REQUEST_ERROR( 217, "非法回调请求"),
  36.     FETCH_ACCESSTOKEN_FAILD( 218, "获取accessToken失败"),
  37.     FETCH_USERINFO_ERROR( 219, "获取用户信息失败"),
  38.     //LOGIN_ERROR( 23005, "登录失败"),
  39.  
  40.     PAY_RUN(220, "支付中"),
  41.     CANCEL_ORDER_FAIL(225, "取消订单失败"),
  42.     CANCEL_ORDER_NO(225, "不能取消预约"),
  43.  
  44.     HOSCODE_EXIST(230, "医院编号已经存在"),
  45.     NUMBER_NO(240, "可预约号不足"),
  46.     TIME_NO(250, "当前时间不可以预约"),
  47.  
  48.     SIGN_ERROR(300, "签名错误"),
  49.     HOSPITAL_OPEN(310, "医院未开通，暂时不能访问"),
  50.     HOSPITAL_LOCK(320, "医院被锁定，暂时不能访问"),
  51.     HOSPITAL_LOCKKEY(330,"医院对应key不一致")
  52.     ;
  53.  
  54.     private Integer code;
  55.     private String message;
  56.  
  57.     private ResultCodeEnum(Integer code, String message) {
  58.         this.code = code;
  59.         this.message = message;
  60.     }
  61. }

4：完成vue2前端的创建

4.1 安装uploader和spark-md5的依赖

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

 

 4.2 mainjs导入uploader

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

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

效果：

 

 

 redis 中的文件：

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/66647
推荐阅读