为什么使用Vue-Simple-Uploader

最近用到了Vue + Spring Boot来完成文件上传的操作，踩了一些坑，对比了一些Vue的组件，发现了一个很好用的组件——Vue-Simple-Uploader

再说说为什么选用这个组件，对比vue-ant-design和element-ui的上传组件，它能做到更多的事情，比如：

  • 可暂停、继续上传
  • 上传队列管理，支持最大并发上传
  • 分块上传
  • 支持进度、预估剩余时间、出错自动重试、重传等操作
  • 支持“快传”，通过文件判断服务端是否已存在从而实现“快传”

由于需求中需要用到断点续传，所以选用了这个组件，下面我会从最基础的上传开始说起：

单文件上传、多文件上传、文件夹上传

Vue代码：

  1.  <uploader
  2.         :options="uploadOptions1"
  3.         :autoStart="true"
  4.         class="uploader-app"
  5.       >
  6.         <uploader-unsupport></uploader-unsupport>
  7.         <uploader-drop>
  8.           <uploader-btn style="margin-right:20px;" :attrs="attrs">选择文件</uploader-btn>
  9.           <uploader-btn :attrs="attrs" directory>选择文件夹</uploader-btn>
  10.         </uploader-drop>
  11.         <uploader-list></uploader-list>
  12. </uploader>

该组件默认支持多文件上传，这里我们从官方demo中粘贴过来这段代码，然后在uploadOption1中配置上传的路径即可，其中uploader-btn 中设置directory属性即可选择文件夹进行上传。

uploadOption1：

  1.  uploadOptions1: {
  2.         target: "//localhost:18080/api/upload/single",//上传的接口
  3.         testChunks: false, //是否开启服务器分片校验
  4.         fileParameterName: "file",//默认的文件参数名
  5.         headers: {},
  6.         query() {},
  7.         categaryMap: { //用于限制上传的类型
  8.           image: ["gif", "jpg", "jpeg", "png", "bmp"]
  9.         }
  10. }

在后台的接口的编写，我们为了方便，定义了一个chunk类用于接收组件默认传输的一些后面方便分块断点续传的参数：

Chunk类

  1. @Data
  2. public class Chunk implements Serializable {
  4.     private static final long serialVersionUID = 7073871700302406420L;
  6.     private Long id;
  7.     /**
  8.      * 当前文件块，从1开始
  9.      */
  10.     private Integer chunkNumber;
  11.     /**
  12.      * 分块大小
  13.      */
  14.     private Long chunkSize;
  15.     /**
  16.      * 当前分块大小
  17.      */
  18.     private Long currentChunkSize;
  19.     /**
  20.      * 总大小
  21.      */
  22.     private Long totalSize;
  23.     /**
  24.      * 文件标识
  25.      */
  26.     private String identifier;
  27.     /**
  28.      * 文件名
  29.      */
  30.     private String filename;
  31.     /**
  32.      * 相对路径
  33.      */
  34.     private String relativePath;
  35.     /**
  36.      * 总块数
  37.      */
  38.     private Integer totalChunks;
  39.     /**
  40.      * 文件类型
  41.      */
  42.     private String type;
  44.     /**
  45.      * 要上传的文件
  46.      */
  47.     private MultipartFile file;
  48. }

在编写接口的时候，我们直接使用这个类作为参数去接收vue-simple-uploader传来的参数即可，注意这里要使用POST来接收哟~

接口方法：

  1.     @PostMapping("single")
  2.     public void singleUpload(Chunk chunk) {
  3.    		     	// 获取传来的文件
  4.         MultipartFile file = chunk.getFile();
  5.         // 获取文件名
  6.         String filename = chunk.getFilename();
  7.         try {
  8.             // 获取文件的内容
  9.             byte[] bytes = file.getBytes();
  10.             // SINGLE_UPLOADER是我定义的一个路径常量，这里的意思是，如果不存在该目录，则去创建
  11.             if (!Files.isWritable(Paths.get(SINGLE_FOLDER))) {
  12.                 Files.createDirectories(Paths.get(SINGLE_FOLDER));
  13.             }
  14.             // 获取上传文件的路径
  15.             Path path = Paths.get(SINGLE_FOLDER,filename);
  16.             // 将字节写入该文件
  17.             Files.write(path, bytes);
  18.         } catch (IOException e) {
  19.             e.printStackTrace();
  20.         }
  21.     }

这里需要注意一点，如果文件过大的话，Spring Boot后台会报错

  1. org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes.

这时需要在application.yml中配置servlet的最大接收文件大小(默认大小是1MB和10MB)

  1. spring:
  2.   servlet:
  3.     multipart:
  4.       max-file-size: 10MB
  5.       max-request-size: 100MB

下面我们启动项目，选择需要上传的文件就可以看到效果了~ 是不是很方便~ 但是同样的事情其余的组件基本上也可以做到，之所以选择这个，更多的是因为它可以支持断点分块上传，实现上传过程中断网，再次联网的话可以从断点位置开始继续秒传~下面我们来看看断点续传是怎么玩的。

断点分块续传

先说一下分块断点续传的大概原理，我们在组件可以配置分块的大小，大于该值的文件会被分割成若干块儿去上传，同时将该分块的chunkNumber保存到数据库(Mysql or Redis，这里我选择的是Redis）

组件上传的时候会携带一个identifier的参数(这里我采用的是默认的值，你也可以通过生成md5的方式来重新赋值参数)，将identifier作为Redis的key，设置hashKey为”chunkNumber“，value是由每次上传的chunkNumber组成的一个Set集合。

在将uploadOption中的testChunk的值设置为true之后，该组件会先发一个get请求，获取到已经上传的chunkNumber集合，然后在checkChunkUploadedByResponse方法中判断是否存在该片段来进行跳过，发送post请求上传分块的文件。

每次上传片段的时候，service层返回当前的集合大小，并与参数中的totalChunks进行对比，如果发现相等，就返回一个状态值，来控制前端发出merge请求，将刚刚上传的分块合为一个文件，至此文件的断点分块上传就完成了。

下面是对应的代码~

Vue代码：

  1. <uploader
  2.         :options="uploadOptions2"
  3.         :autoStart="true"
  4.         :files="files"
  5.         @file-added="onFileAdded2"
  6.         @file-success="onFileSuccess2"
  7.         @file-progress="onFileProgress2"
  8.         @file-error="onFileError2"
  9.       >
  10.         <uploader-unsupport></uploader-unsupport>
  11.         <uploader-drop>
  12.           <uploader-btn :attrs="attrs">分块上传</uploader-btn>
  13.         </uploader-drop>
  14.         <uploader-list></uploader-list>
  15. </uploader>

校验是否上传过的代码

  1.  uploadOptions2: {
  2.         target: "//localhost:18080/api/upload/chunk",
  3.         chunkSize: 1 * 1024 * 1024,
  4.         testChunks: true,
  5.         checkChunkUploadedByResponse: function(chunk, message) {
  6.           let objMessage = JSON.parse(message);
  7.           	// 获取当前的上传块的集合
  8.           let chunkNumbers = objMessage.chunkNumbers;
  9.           // 判断当前的块是否被该集合包含，从而判定是否需要跳过
  10.           return (chunkNumbers || []).indexOf(chunk.offset + 1) >= 0;
  11.         },
  12.         headers: {},
  13.         query() {},
  14.         categaryMap: {
  15.           image: ["gif", "jpg", "jpeg", "png", "bmp"],
  16.           zip: ["zip"],
  17.           document: ["csv"]
  18.         }
  19. }

上传后成功的处理，判断状态来进行merge操作

  1. onFileSuccess2(rootFile, file, response, chunk) {
  2.       let res = JSON.parse(response);
  3. 	      // 后台报错
  4.       if (res.code == 1) {
  5.         return;
  6.       }
  7.       // 需要合并
  8.       if (res.code == 205) {
  9.         // 发送merge请求，参数为identifier和filename，这个要注意需要和后台的Chunk类中的参数名对应，否则会接收不到~
  10.         const formData = new FormData();
  11.         formData.append("identifier", file.uniqueIdentifier);
  12.         formData.append("filename", file.name);
  13.         merge(formData).then(response => {});
  14.       }
  15.     },

判定是否存在的代码，注意这里的是GET请求！！！

  1.  				   @GetMapping("chunk")
  2.     public Map<String, Object> checkChunks(Chunk chunk) {
  3.         return uploadService.checkChunkExits(chunk);
  4.     }
  6.     @Override
  7.     public Map<String, Object> checkChunkExits(Chunk chunk) {
  8.         Map<String, Object> res = new HashMap<>();
  9.         String identifier = chunk.getIdentifier();
  10.         if (redisDao.existsKey(identifier)) {
  11.             Set<Integer> chunkNumbers = (Set<Integer>) redisDao.hmGet(identifier, "chunkNumberList");
  12.             res.put("chunkNumbers",chunkNumbers);
  13.         }
  14.         return res;
  15.     }

保存分块，并保存数据到Redis的代码。这里的是POST请求！！！


  2.     @PostMapping("chunk")
  3. 			    public Map<String, Object> saveChunk(Chunk chunk) {
  4.         // 这里的操作和保存单段落的基本是一致的~
  5.         MultipartFile file = chunk.getFile();
  6.         Integer chunkNumber = chunk.getChunkNumber();
  7.         String identifier = chunk.getIdentifier();
  8.         byte[] bytes;
  9.         try {
  10.             bytes = file.getBytes();
  11.             // 这里的不同之处在于这里进行了一个保存分块时将文件名的按照-chunkNumber的进行保存
  12.             Path path = Paths.get(generatePath(CHUNK_FOLDER, chunk));
  13.             Files.write(path, bytes);
  14.         } catch (IOException e) {
  15.             e.printStackTrace();
  16.         }
  17.    			     // 这里进行的是保存到redis，并返回集合的大小的操作
  18.         Integer chunks = uploadService.saveChunk(chunkNumber, identifier);
  19.         Map<String, Object> result = new HashMap<>();
  20.         // 如果集合的大小和totalChunks相等，判定分块已经上传完毕，进行merge操作
  21.         if (chunks.equals(chunk.getTotalChunks())) {
  22.             result.put("message","上传成功！");
  23.             result.put("code", 205);
  24.         }
  25.         return result;
  26.     }
  28. 	    /**
  29. 	     * 生成分块的文件路径
  30. 	     */
  31. 	    private static String generatePath(String uploadFolder, Chunk chunk) {
  32.         StringBuilder sb = new StringBuilder();
  33.         // 拼接上传的路径
  34.         sb.append(uploadFolder).append(File.separator).append(chunk.getIdentifier());
  35.         //判断uploadFolder/identifier 路径是否存在，不存在则创建
  36.         if (!Files.isWritable(Paths.get(sb.toString()))) {
  37.             try {
  38.                 Files.createDirectories(Paths.get(sb.toString()));
  39.             } catch (IOException e) {
  40.                 log.error(e.getMessage(), e);
  41.             }
  42.         }
  43.         // 返回以 - 隔离的分块文件，后面跟的chunkNumber方便后面进行排序进行merge
  44.         return sb.append(File.separator)
  45.                 .append(chunk.getFilename())
  46.                 .append("-")
  47.                 .append(chunk.getChunkNumber()).toString();
  49.     }
  51.     /**
  52.      * 保存信息到Redis
  53.      */
  54. 	    public Integer saveChunk(Integer chunkNumber, String identifier) {
  55.         // 获取目前的chunkList
  56.         Set<Integer> oldChunkNumber = (Set<Integer>) redisDao.hmGet(identifier, "chunkNumberList");
  57.         // 如果获取为空，则新建Set集合，并将当前分块的chunkNumber加入后存到Redis
  58.         if (Objects.isNull(oldChunkNumber)) {
  59.             Set<Integer> newChunkNumber = new HashSet<>();
  60.             newChunkNumber.add(chunkNumber);
  61.             redisDao.hmSet(identifier, "chunkNumberList", newChunkNumber);
  62.             // 返回集合的大小
  63.             return newChunkNumber.size();
  64.         } else {
  65.        	     // 如果不为空，将当前分块的chunkNumber加到当前的chunkList中，并存入Redis
  66.             oldChunkNumber.add(chunkNumber);
  67.             redisDao.hmSet(identifier, "chunkNumberList", oldChunkNumber);
  68.             // 返回集合的大小
  69.             return oldChunkNumber.size();
  70.         }
  72.     }

合并的后台代码：

  1.     @PostMapping("merge")
  2.     public void mergeChunks(Chunk chunk) {
  3.         String fileName = chunk.getFilename();
  4.         uploadService.mergeFile(fileName,CHUNK_FOLDER + File.separator + chunk.getIdentifier());
  5.     }
  7. 	    @Override
  8.     public void mergeFile(String fileName, String chunkFolder) {
  9.         try {
  10.             // 如果合并后的路径不存在，则新建
  11.             if (!Files.isWritable(Paths.get(mergeFolder))) {
  12.                 Files.createDirectories(Paths.get(mergeFolder));
  13.             }
  14.             // 合并的文件名
  15.             String target = mergeFolder + File.separator + fileName;
  16.             // 创建文件
  17.             Files.createFile(Paths.get(target));
  18.             // 遍历分块的文件夹，并进行过滤和排序后以追加的方式写入到合并后的文件
  19.             Files.list(Paths.get(chunkFolder))
  20.                      //过滤带有"-"的文件
  21.                     .filter(path -> path.getFileName().toString().contains("-"))
  22.                      //按照从小到大进行排序
  23.                     .sorted((o1, o2) -> {
  24.                         String p1 = o1.getFileName().toString();
  25.                         String p2 = o2.getFileName().toString();
  26.                         int i1 = p1.lastIndexOf("-");
  27.                         int i2 = p2.lastIndexOf("-");
  28.                         return Integer.valueOf(p2.substring(i2)).compareTo(Integer.valueOf(p1.substring(i1)));
  29.                     })
  30.                     .forEach(path -> {
  31.                         try {
  32.                             //以追加的形式写入文件
  33.                             Files.write(Paths.get(target), Files.readAllBytes(path), StandardOpenOption.APPEND);
  34.                             //合并后删除该块
  35.                             Files.delete(path);
  36.                         } catch (IOException e) {
  37.                             e.printStackTrace();
  38.                         }
  39.                     });
  40.         } catch (IOException e) {
  41.             e.printStackTrace();
  42.         }
  43.     }

至此，我们的断点续传就完美结束了，完整的代码我已经上传到gayhub~，欢迎star fork pr(后面还会把博文也上传到gayhub哟)

前端：https://github.com/viyog/viboot-front

后台：https://github.com/viyog/viboot

写在后面

最近由于家庭+工作忙昏了头，鸽了这么久很是抱歉，从这周开始恢复更新，同时本人在准备往大数据转型，后续会出一系列的Java转型大数据的学习笔记，包括Java基础系列的深入解读和重写，同时Spring Boot系列还会一直保持连载，不过可能不会每周都更，我会把目前使用Spring Boot中遇到的问题和坑写一写，谢谢一直支持我的粉丝们

Spring Boot 2.x（十六）：玩转vue文件上传的更多相关文章

  1. Spring Boot 2.X(十六)：应用监控之 Spring Boot Actuator 使用及配置

    Actuator 简介 Actuator 是 Spring Boot 提供的对应用系统的自省和监控功能.通过 Actuator,可以使用数据化的指标去度量应用的运行情况,比如查看服务器的磁盘.内存.C ...

  2. 风炫安全web安全学习第三十六节课-15种上传漏洞讲解(一)

    风炫安全web安全学习第三十六节课 15种上传漏洞讲解(一) 文件上传漏洞 0x01 漏洞描述和原理 文件上传漏洞可以说是日常渗透测试用得最多的一个漏洞,因为用它获得服务器权限最快最直接.但是想真正把 ...

  3. Spring MVC 学习总结（五）——校验与文件上传

    Spring MVC不仅是在架构上改变了项目,使代码变得可复用.可维护与可扩展,其实在功能上也加强了不少. 验证与文件上传是许多项目中不可缺少的一部分.在项目中验证非常重要,首先是安全性考虑,如防止注 ...

  4. Spring学习笔记2——表单数据验证、文件上传

    在上一章节Spring学习笔记1——IOC: 尽量使用注解以及java代码中,已经搭建了项目的整体框架,介绍了IOC以及mybatis.第二节主要介绍SpringMVC中的表单数据验证以及文件上传. ...

  5. Spring Boot教程（十六）属性配置文件详解（1）

    相信很多人选择Spring Boot主要是考虑到它既能兼顾Spring的强大功能,还能实现快速开发的便捷.我们在Spring Boot使用过程中,最直观的感受就是没有了原来自己整合Spring应用时繁 ...

  6. 学习Spring Boot：（十六）使用Shiro与JWT 实现认证服务

    前言 需要把Web应用做成无状态的,即服务器端无状态,就是说服务器端不会存储像会话这种东西,而是每次请求时access_token进行资源访问.这里我们将使用 JWT 1,基于散列的消息认证码,使用一 ...

  7. 第二百七十三节，Tornado框架-文件上传

    Tornado框架-文件上传 第一.普通表单上传文件 self.request.files["fafafa"] 获取上传文件信息,参数["上传文件框的name名称&quo ...

  8. ios开发网络学习十二：NSURLSession实现文件上传

    #import "ViewController.h" // ----WebKitFormBoundaryvMI3CAV0sGUtL8tr #define Kboundary @&q ...

  9. （十五）struts2的文件上传和下载

    文件上传的原理 我们以前学习上传的时候知道需要将表单的enctype属性设置为multipart/form-data. 表单的enctype属性指定的是表单数据的编码方式,有三个值: -applica ...

随机推荐

  1. windows下elasticsearch安装ik分词器后无法启动

    windows下elasticsearch安装ik分词器后启动报如下图错误: 然后百度说是elasticsearch路径有空格,一看果然我的路径有空格,然后重新换个路径就好了.

  2. SpringApplication常见用法说明

    启动方式 方式1:在main方法中执行SpringApplication.run()这种方式来启动我们的工程 // 方式一 @SpringBootApplication public class Ap ...

  3. Golang 调用 C/C++，例子式教程

    大部分人学习或者使用某样东西,喜欢在直观上看到动手后的结果,才会有继续下去的兴趣. 前言: Golang 调用 C/C++ 的教程网上很多,就我目前所看到的,个人见解就是比较乱,坑也很多.希望本文能在 ...

  4. python 搭建 websocket server 发送 sensor 数据

    搞了几天,顺便把代码贴这里,需要的 python 包: gevent,gevent-websocket,bottle,wiringpi-python 简单说明: - gevent 提供了支持 conc ...

  5. 【mysql】新增列 时间戳

    参考地址:https://www.cnblogs.com/SZxiaochun/p/9299392.html ALTER TABLE worksheet_data_12 ), ADD COLUMN ` ...

  6. （9）ASP.NET Core 中的MVC路由二

    1.URL生成 MVC应用程序可以使用路由的URL生成功能,生成指向操作(Action)的URL链接. IUrlHelper 接口用于生成URL,是MVC与路由之间的基础部分.在控制器.视图和视图组件 ...

  7. K8S学习笔记之Pod的Volume emptyDir和hostPath

    0x00 Volume的类型 Volume是Kubernetes Pod中多个容器访问的共享目录. Volume被定义在Pod上,被这个Pod里的多个容器挂在到相同或不同的路径下. Volume的生命 ...

  8. opencv常用数据结构

    2019/10/29 1.Mat 成员函数:cols.rows.channels.ptr获取任意行的首地址.at处理像素 2.InputArray/OutArray相当于Mat 2019/11/4 1 ...

  9. C#视频拍照、视频录制项目示例

    1.AForge 2.WPFMediaKit 3.ffmpeg

  10. 基于Druid数据库连接池的DBUtil工具类

    工具类 DruidUtil.java package com.zzuli.util; import com.alibaba.druid.pool.DruidDataSourceFactory; imp ...