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，读者可以通过切换分支来查看本文的示例代码