SpringMVC文件上传

2019-06-13

SpringMVC框架提供了文件上传解析功能，它也是对Commons FileUpload的进一步简化封装，下面对其使用配置过程做简单记录。

1、添加相关依赖包

默认项目基于MAVEN工程开发，添加Commons FileUpload依赖坐标如下：
【
注：如果项目不是MAVEN工程，只需要到这里：https://mvnrepository.com/参照坐标下载指定的jar包，导入到项目 WEB-INF 下的 lib 目录下即可。
】


<!--引入Commons FileUpload start -->
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.4</version>
</dependency>
  <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.2</version>
  </dependency>
<!--引入Commons FileUpload end -->

2、添加文件上传解析器的配置信息

找到项目的Spring配置文件，例如本项目的配置文件为 springApplication.xml，在<beans></beans>节点下添加新的<bean></bean>节点申明，代码如下：

注意：其中 id="multipartResolver"是固定写法，不能写成其他的名字。

<!-- 文件上传解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 配置表单默认编码方式【最好与前端编码方式统一】 -->
    <property name="defaultEncoding" value="UTF-8" />
    <!-- 配置最大文件上传字节（10M） -->
    <property name="maxUploadSize" value="10485760" />
</bean>

3、编写前端控制器Controller

以上两步完成后，就可以编写前端控制器了，核心实例代码如下【17行~31行】：

注意：testFileupload方法中，参数MultipartFile非常重要，它指的是表单中的文件类型，而形参file指的是表单中文件域的name属性的值，如果形参想设置为其他变量名，就需要使用@RequestParam("file")来修饰该参数。也就是：public String testFileupload(HttpServletRequest request, @RequestParam("file") MultipartFile myfile)


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;

@Controller
@RequestMapping("/params")
public class ParamsController {

    @RequestMapping("testFileupload")
    public String testFileupload(HttpServletRequest request, MultipartFile file){
        if (file != null){
            // 判断上传的文件是否为空
            if(!file.isEmpty()){
                // 打印上传的文件名
                System.out.println(file.getOriginalFilename());
                try {
                    // 将文件转存到指定目录
                    file.transferTo(new File(request.getContextPath()+"/files/"+file.getOriginalFilename()));
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }

        }
        return "success";
    }
}

4、编写前端form表单

文件上传的前端form表单与普通存在几点不同之处：
1、文件上传提交方法必须是POST类型
2、文件上传表单的enctype必须要写成multipart/form-data

实例代码如下【form表单的申明在14行】：

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>文件上传</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js"></script>
</head>
<body class="layui-container">
<div class="layui-row">
    <div class="layui-card">
        <div class="layui-card-header">文件上传</div>
        <div class="layui-card-body">
            <div class="layui-col-md-offset2 layui-col-md8">

                <form class="layui-form" method="post" action="${pageContext.request.contextPath}/params/testFileupload"
                      enctype="multipart/form-data">
                    <div class="layui-form-item">
                        <label for="file" class="layui-form-label">文件：</label>
                        <div class="layui-input-block">
                            <button id="pickFile" type="button" class="layui-btn"><i class="layui-icon layui-icon-upload"></i>选择文件</button>
                            <br>
                            <%-- 显示文件名的span标签 --%>
                            <span id="fileName"></span>
                            <%-- 隐藏的file input标签（因为浏览器样式不好看，因此使用普通button传递事件来达到效果） --%>
                            <input id="file" required
                                   accept="application/msword,image/jpeg,image/png,application/pdf" name="file"
                                   class="layui-input layui-hide" type="file">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button id="commit" class="layui-btn">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(["jquery", "layer"], function () {
        var $ = layui.jquery;
        var layer = layui.layer;

        // 设置pickFile 选择文件的点击事件
        $("#pickFile").click(function () {
            // 传递事件，手动file input输入框点击事件
            $("#file").click();
        });
        // 设置file input输入框内容变化监听事件
        $("#file").change(function () {
            // 检测到file input内容发生变化后，将更新后的值赋值给对应的span标签显示出来
            $("#fileName").text($(this).val());
        });
        // 提交按钮监听事件
        $("#commit").click(function () {
            // 如果用户未选择文件，不允许上传
            if ($("#file").val().length == 0) {
                layer.msg("请选择上传的文件");
            }
        });
    })
</script>
</html>

至此，完成了整个文件上传的所有步骤。

前端页面效果如图所示：