单文件和多文件上传的使用
# 390.单文件和多文件上传的使用
讲讲另一个常用功能：文件上传功能如何开发
# 前端页面
还是以后台管理系统为例，在Forms-Form Layouts功能中，有一个文件上传的表单：
我们先将form_layouts.html，放到templates/form/文件夹中；
然后同样的，用common.html里定义的公共部分（左侧菜单，头部菜单和静态资源），替换掉原先的代码；
然后修改common.html中，关于该功能的菜单地址：
<li><a th:href="@{form_layouts}"> Form Layouts</a></li>
# 新增controller返回页面
/**
* 文件上传测试
*/
package com.peterjxl.learnspringbootwebadmin.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class FormTestController {
@GetMapping("/form_layouts")
public String form_layouts(){
return "form/form_layouts";
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
重启，访问，能正常显示：
# 修改表单
我们修改下原本的form_layouts.html，给原本的输入框加个name属性；还可以多文件上传，因此我们多添加一个div，并给输入框加个multiple属性：
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" name="headerImg" id="exampleInputFile">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" name="photos" multiple>
</div>
2
3
4
5
6
7
8
9
然后修改表单的属性：路径为upload，method必须为post，设置enctype属性，都是固定写法：
<form role="form" th:action="@{/upload}" method="post" enctype="multipart/form-data">
# 新增方法处理请求
在SpringBoot中，可以很方便地将文件封装为一个MultipartFile对象，只需在方法参数中加个注解即可：
@PostMapping("/upload")
public String upload(@RequestPart("headerImg") MultipartFile headerImg,
@RequestPart("photos") MultipartFile[] photos) throws IOException {
// 先确定是否有文件上传
if( ! headerImg.isEmpty()){
String originalFilename = headerImg.getOriginalFilename();
// 可以保存到文件服务器，例如OSS服务器，这里就先保存到本地
headerImg.transferTo(new File("D:\\" + originalFilename));
}
// 先确定是否有文件上传，不过如果没有，则长度为0，不会执行循环
for (MultipartFile photo : photos) {
if (!photo.isEmpty()) {
String originalFilename = photo.getOriginalFilename();
// 可以保存到文件服务器，例如OSS服务器，这里就先保存到本地
photo.transferTo(new File("D:\\" + originalFilename));
}
}
return "main";
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
MultipartFile是一个接口，有很多有用的方法。例如可以获取文件名，获取IO流，或者直接调用transferTo来保存文件。这里我们就将上传的文件保存到D盘根目录。
至此，读者就可以自行测试上传文件了。
# 文件上传的限制
注意，文件上传是有限制大小的，默认1M，超过就报错：
这是在哪配的呢？首先我们可以打开MultipartAutoConfiguration类：
@Configuration(proxyBeanMethods = false)
@ConditionalOnClass({ Servlet.class, StandardServletMultipartResolver.class, MultipartConfigElement.class })
@ConditionalOnProperty(prefix = "spring.servlet.multipart", name = "enabled", matchIfMissing = true)
@ConditionalOnWebApplication(type = Type.SERVLET)
@EnableConfigurationProperties(MultipartProperties.class)
public class MultipartAutoConfiguration {
2
3
4
5
6
我们打开MultipartProperties类：其中就有限制文件最大为1M，请求最大为10MB：
@ConfigurationProperties(prefix = "spring.servlet.multipart", ignoreUnknownFields = false)
public class MultipartProperties {
/**
* Max file size.
*/
private DataSize maxFileSize = DataSize.ofMegabytes(1);
/**
* Max request size.
*/
private DataSize maxRequestSize = DataSize.ofMegabytes(10);
2
3
4
5
6
7
8
9
10
11
12
因此，我们可以增加配置（源码里写了，spring.servlet.multipart开头），在application.yml中添加配置：
server:
port: 9999
spring:
servlet:
multipart:
max-file-size: 10MB
max-request-size: 100MB
2
3
4
5
6
7
# 源码
已将本文源码上传到Gitee (opens new window)或GitHub (opens new window) 的分支demo5，读者可以通过切换分支来查看本文的示例代码
