创建一个SpringBoot项目，创建SpringBoot 项目同时添加 webapp 文件夹 用于放 html 页面。

项目结构：

可能你创建的SpringBoot项目没有webapp文件夹，我也为你准备了解决办法。

解决方法：

点击工具栏 Project Structure 按钮[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q3L0GiXU-1598349113955)(C:Usershainei-developerDesktop微信截图_20200825164438.png)]，在打开的窗口中选中 Moudles -> Web，按照步骤添加配置：

项目有webapps文件夹了吧，继续来看文件上传吧！↓

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-configuration-processor</artifactId>
    <optional>true</optional>
</dependency>
<!--web模块-->
<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>

完整pom.xml，在build中添加resource保证在webapps下面的html文件进行编译。

<?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 https://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.3.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ifknow</groupId>
    <artifactId>spring-boot-fileupload</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>spring-boot-fileupload</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</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <!--web模块-->
        <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-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
        <resources>
            <resource>
                <directory>src/main/webapp</directory>
                <!--注意此次必须要放在此目录下才能被访问到 -->
                <targetPath>META-INF/resources</targetPath>
                <includes>
                    <include>**/**</include>
                </includes>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
                <includes>
                    <include>**/*</include>
                </includes>
            </resource>
        </resources>
    </build>

</project>

配置项目上传路径和文件上传大小。

server:
  port: 8081
# 文件上传路径配置
my:
  uploadFile:
    uploadPath: C:softInstallTomcat 8.5webappsfileupload
    readPath: fileupload
# 文件上传大小
spring:
  servlet:
    multipart:
      enabled: true
      file-size-threshold: 0
      max-file-size: 200MB
      max-request-size: 200MB

编写一个HTML页面，页面上一个file的button，为了展现技术，很无聊的加了一个简陋的进度条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
    .box {
        height: 30px;
        width: 200px;
        border: 1px solid green;
        margin-top: 30px;
    }

    article {
        height: 100%;
        width: 0;
        background: palegreen;
    }
</style>
<body>
<input type="file" id="file">
<div class="box">
    <article class="cont"></article>
</div>
<a id="back" href="#">##</a>
</body>
<script>
    function uploadImg(fileInfo) {
        const data = new FormData();
        data.append('file', fileInfo)
        return new Promise((reslove, reject) => {
            $.ajax({
                type: 'post',
                url: '/file/upload',
                data,
                processData: false,
                contentType: false,
                xhr() {
                    const myXhr = $.ajaxSettings.xhr();
                    myXhr.upload.addEventListener('progress', (e) => {
                        console.log(e.loaded, e.total)
                        document.querySelector('.cont').style.width = `${(e.loaded / e.total) * 100}%`
                    })
                    return myXhr
                },
                success(data) {
                    console.log(data.url)
                    $("#back").attr("href", "http://localhost:8080" + data.url)
                    $("#back").text(data.newName)
                },
                error() {
                }
            })
        })
    }

    const file = document.querySelector('#file');
    file.onchange = function (e) {
        document.querySelector('.cont').style.width = '0px'
        const files = e.target.files;
        [...files].forEach((res) => {
            uploadImg(res).then((res) => {
            }, (err) => {
            })
        })
    }
</script>
</html>

• 读取application.yml的配置文件中定义的内容，编写一个配置类

package com.ifknow.config;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;

/**
 * @Author: ifknow <br>
 * @Date: 2020/8/25  10:18 <br>
 * @Description: 读取配置文件中定义的文件上传路径
 */
@Configuration
@ConfigurationProperties(prefix = "my", ignoreUnknownFields = false)
public class ObtainProperties {
    /**
     * 文件上传配置
     */
    private final UploadFile uploadFile = new UploadFile();

    public UploadFile getUploadFile() {
        return uploadFile;
    }

    @Data
    public static class UploadFile {
        private String uploadPath;
        private String readPath;
    }
}

• 文件上传实现