SpringBoot+Vue.js前后端分离实现大文件分块上传

原文地址: 我的博客
博客地址: https://luoliangdsga.github.io

SpringBoot+Vue.js前后端分离实现大文件分块上传

之前写过一篇SpringBoot+Vue前后端分离实现文件上传的博客，但是那篇博客主要针对的是小文件的上传，如果是大文件，一次性上传，将会出现不可预期的错误。所以需要对大文件进行分块，再依次上传，这样处理对于服务器容错更好处理，更容易实现断点续传、跨浏览器上传等功能。本文也会实现断点，跨浏览器继续上传的功能。

开始

GIF效果预览

[外链图片转存失败(img-7GK8BNrH-1567674336040)(https://raw.githubusercontent.com/simple-uploader/vue-uploader/master/example/simple-uploader.gif)]
此处用到了这位大佬的Vue上传组件，此图也是引用自他的GitHub，感谢这位大佬。

需要准备好基础环境

• Java
• Node
• MySQL

准备好这些之后，就可以往下看了。

后端

新建一个SpringBoot项目，我这里使用的是SpringBoot2，引入mvc，jpa，mysql相关的依赖。

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>${
   lombok.version}</version>
        </dependency>
    </dependencies>

在yml中配置mvc以及数据库连接等属性

server:
  port: 8081
  servlet:
    path: /boot

spring:
  servlet:
    multipart:
      max-file-size: 20MB
      max-request-size: 20MB
  datasource:
    url: jdbc:mysql://localhost:3306/test?characterEncoding=utf-8&useSSL=false
    username: root
    password: root
    driver-class-name: com.mysql.jdbc.Driver
  jpa:
    properties:
      hibernate:
        hbm2ddl:
          auto: update
    show-sql: true

logging:
  level:
    org.boot.uploader.*