原文地址: 我的博客
博客地址: 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.*