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.*
  • 6
    点赞
  • 68
    收藏
    觉得还不错? 一键收藏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值