Springboot 多文件上传

其实多个文件和单个文件上传是一样的,可以使用同一个Controller

添加依赖


<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>

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

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

<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
    <version>3.9</version>
</dependency>

<!-- 热启动 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <scope>runtime</scope>
    <optional>true</optional>
</dependency>

编写页面

ok页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/bootstrap-theme.css}" media="all">
    <script type="text/javascript" th:src="@{/js/jquery-1.12.4.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}" charset="utf-8"></script>

</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">
            文件上传
        </h3>
    </div>
</div>
<div class="container">
    <div class=" panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                文件上传结果
            </h3>
        </div>
        <div class="panel-body">
            上传成功
        </div>
    </div>
</div>
</body>
</html>

文件上传页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/bootstrap-theme.css}" media="all">
    <script type="text/javascript" th:src="@{/js/jquery-1.12.4.min.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}" charset="utf-8"></script>
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading"><h3 class="panel-title">多文件上传</h3></div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <form class="form-horizontal" action="/file/uploads" enctype="multipart/form-data" method="post">
                <div class="form-group">
                    <div class="input-group col-md-4"><span class="input-group-addon"><i
                            class="glyphicon glyphicon-upload"></i></span>
                        <input class="form-control" type="file" name="files" multiple="multiple" placeholder="文件"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-4">
                        <div class="btn-group btn-group-justified">
                            <div class="btn-group">
                                <button type="submit" class="btn btn-success" id="submitBtn">
                                    <span class="glyphicon glyphicon-share"></span>&nbsp;上传
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

主要就是文件的上传,使用了表单上传,Post方式请求,使用了bootstrap的多文件上传组件

编写Controller

PageController

@Controller
public class PageController {

    @RequestMapping("/{redirect}")
    public String redirect(@PathVariable String redirect) {
        if(StringUtils.isBlank(redirect)) {
            return "index";
        }
        return redirect;
    }
}


FileUploadController

@Controller
@RequestMapping("/file")
public class FileUploadController {

    /** 文件保存路径 */
    @Value("${fileStorePath}")
    private String fileStorePath;

    /**
     * 上传文件
     * @param files 文件对象
     * @return 视图ok
     * @throws IOException 操作异常
     */
    @RequestMapping("/uploads")
    public String uploadMoreFiles(@RequestParam("files") MultipartFile ... files) throws IOException {

        String fileName;
        for (MultipartFile file : files) {
            fileName = file.getOriginalFilename();
            assert fileName != null;
            File targetFile = new File(fileStorePath, fileName);
            if (!targetFile.exists()) {
                if (targetFile.mkdirs()) {
                    System.out.println("创建文件成功!");
                }
            }
            file.transferTo(targetFile);
        }
        return "ok";
    }
}

添加配置

yml文件

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    ##关闭缓存
    cache: false
    check-template-location: true
    servlet:
      content-type: text/html
  servlet:
    multipart:
      max-file-size: 200MB
      max-request-size: 250MB

server:
  port: 80

properties文件

#热启动
spring.devtools.restart.enabled=true
spring.devtools.restart.additional-paths=src/main/java

#上传文件路径
fileStorePath=d:/file

个人习惯性的将需要修改的属性放在properties配置文件中,小工程就没有分文件了

测试界面

在这里插入图片描述
选择文件
在这里插入图片描述

上传结果

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值