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";
    }
}

‍ 重启，访问，能正常显示：

‍

修改表单

我们修改下原本的 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>

然后修改表单的属性：路径为 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";
}

‍ 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 {

‍ 我们打开 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);

因此，我们可以增加配置（源码里写了，spring.servlet.multipart 开头），在 application.yml 中添加配置：

server:
  port: 9999
spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 100MB

源码

已将本文源码上传到 Gitee (opens new window) 或 GitHub (opens new window) 的分支 demo5，读者可以通过切换分支来查看本文的示例代码