SpringBoot 2.0 整合 WebUploader插件

最新推荐文章于 2024-02-16 14:28:55 发布

金鳞岂非池中物灬

最新推荐文章于 2024-02-16 14:28:55 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： SpringBoot

本文链接：https://blog.youkuaiyun.com/zyt_1272999061/article/details/99305533

本文档介绍了如何在SpringBoot 2.0项目中整合WebUploader插件，包括项目简介、技术选型（SpringBoot、Thymeleaf、WebUploader和Bootstrap）、展示页面效果，以及详细的步骤：前端页面实现、后端接口编写，涉及文件上传、下载、删除等功能的实现。源码可在GitHub找到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SpringBoot 2.0 整合 WebUploader插件

一、项目介绍

本项目基于SpringBoot2.0构建，使用Thymeleaf视图解析器，前端使用bootstrap+WebUploader

二、技术介绍

springboot官网：https://spring.io/projects/spring-boot/
thymeleaf官网：https://www.thymeleaf.org/
webuploader官网：https://fex.baidu.com/webuploader/
bootstrap官网：https://www.bootcss.com/

三、页面效果

下载项目，启动并访问：http://localhost:8080/upload/index
页面效果
- 首页
- 选择文件

在这里插入图片描述

开始上传/暂停上传
下载/删除

四、技术实现

```mermaid
flowchat
st=>start: 开始
op=>operation: 选择文件
op1=>operation: 将文件分片并上传每个分片到服务器
op2=>operation: 所有分片上传成功后，通知服务器合并分片
e=>end
st->op->op1->op2()->e
&```

五、代码实现

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.github.zyt</groupId>
    <artifactId>webuploader</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>webuploader</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--thymeleaf相关-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--热部署相关-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <!--热部署相关-->
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <!-- 如果没有该配置，热部署的devtools不生效 -->
                    <fork>true</fork>
                </configuration>
            </plugin>

        </plugins>
    </build>
</project>

application.properties

server.port=8080
server.tomcat.max-threads=6
server.tomcat.min-spare-threads=3
server.tomcat.accept-count=10
server.tomcat.max-connections=1000

# thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.cache=false
#开启静态资源扫描
spring.mvc.static-path-pattern=/**
#开启热部署
spring.devtools.restart.enabled=true
#设置最大上传大小
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=5GB
spring.servlet.multipart.max-request-size=5GB

#文件路径
upload_path=D:\\upload

上传下载页面

引入css、js

<link rel="stylesheet" th:href="@{/webuploader/webuploader.css}"/>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="application/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script type="application/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script type="application/javascript" th:src="@{/webuploader/webuploader.js}">

页面HTML

<div class="container">
    <div class="row" style="margin-top: 20px;">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">上传</h3>
                </div>
                <div class="panel-body">
                    <div id="uploader" class="wu-example">
                        <!--用来存放文件信息-->
                        <div id="thelist" class="uploader-list"></div>
                        <div class="btns">
                            <div id="picker">选择文件</div>
                            <button id="ctlBtn" class="btn btn-default">开始上传</button>