SpringMVC系列第6篇：多文件上传

star2017 1年前 ⋅ 298 阅读

1、本文内容

2、预备知识

springmvc系列中的测试案例，基本上都是使用idea中的http client插件开发的，是一款非常高效的接口测试工具，还没有用过的，建议先去了解下用法：idea中的接口测试利器（http cient插件）

3、软件版本

  • idea 2020.3.3

  • jdk1.8

  • ≥maven3.6.1
  • spring5.3.6
  • apache-tomcat-9.0.46

4、springmvc文件上传步骤

4个步骤

1、添加maven配置

2、springmvc容器中定义MultipartResolver这个bean

3、controller中使用MultipartFile接收上传的文件

4、调用MultipartFile#transferTo方法保存文件

5、指定请求类型为：multipart/form-data

步骤1：添加maven配置

  1. <!--文件上传的jar包-->
  2. <dependency>
  3.     <groupId>commons-fileupload</groupId>
  4.     <artifactId>commons-fileupload</artifactId>
  5.     <version>1.4</version>
  6. </dependency>
  7. <dependency>
  8.     <groupId>commons-io</groupId>
  9.     <artifactId>commons-io</artifactId>
  10.     <version>2.6</version>
  11. </dependency>

步骤2：定义MultipartResolver这个bean

  1. <!-- bean名称必须为multipartResolver -->
  2. <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  3.     <!--
  4.     maxUploadSizePerFile:单个文件大小限制（byte）
  5.     maxUploadSize：整个请求大小限制（byte）
  6.     -->
  7.     <property name="maxUploadSizePerFile" value="#{10*1024*1024}"/>
  8.     <property name="maxUploadSize" value="#{100*1024*1024}"/>
  9. </bean>

  1. http上传的请求类型为multipart/form-data类型，springmvc内部需要为这种请求指定解析器，解析器的类型为org.springframework.web.multipart.MultipartResolver

  2. MultipartResolver 有2个实现类，这里我们使用 CommonsMultipartResolver 作为解析器来解析文件上传的http请求

  3. 注意bean名称必须为multipartResolver

  4. 两个比较有用的属性

    • maxUploadSizePerFile：单个文件大小限制（byte）

    • maxUploadSize：整个请求大小限制（byte）

步骤3：控制器使用MultipartFile接收上传的文件

  1. @RequestMapping("/upload1.do")
  2. public ModelAndView upload1(@RequestParam("file1") MultipartFile f1){
  3. }

步骤4：调用MultipartFile#transferTo方法保存文件

  1. @RequestMapping("/upload1.do")
  2. public ModelAndView upload1(@RequestParam("file1") MultipartFile f1){
  3.     //destFile为目标文件，即将上传的文件写到destFile中
  4.     f1.transferTo(destFile);
  5. }

步骤5：设置http请求类型为multipart/form-data

上传文件，需要设置form表单的enctype属性值为multipart/form-data

下面来介绍4中常用的上传文件的方式。

5、MultipartFile：上传的文件对象

springmvc中使MultipartFile这个类来表示上传的文件，提供了一系列方法来获取上传的文件的信息。

方法 描述
String getName() 用来获取<input name=””/>中name的名称
String getOriginalFilename() 获取文件的原始名称
String getContentType() 获取文件类型
long getSize() 获取文件大小（byte）
byte[] getBytes() 获取文件内容
InputStream getInputStream() 获取文件流
void transferTo(File dest) 将上传的文件写到dest中

6、单文件上传

控制器中使用一个MultipartFile来接收上传的文件，下面看代码。

表单代码

  1. <form method="post" action="upload1.do" enctype="multipart/form-data">
  2.     文件：<input type="file" name="file1"><br/>
  3.     <input type="submit" value="提交">
  4. </form>

表单中文件元素的name为file1

控制器代码

  1. /**
  2.  * 单文件上传
  3.  * 1、MultipartFile用来接收表单中上传的文件
  4.  * 2、每个MultipartFile对应表单中的一个元素
  5.  * 3、@RequestParam("f1")用来自动接受表单中的哪个元素？value用来指定表单元素的名称
  6.  *
  7.  * @param f1
  8.  * @return
  9.  * @throws IOException
  10.  */
  11. @RequestMapping("/upload1.do")
  12. public ModelAndView upload1(@RequestParam("file1") MultipartFile f1) throws IOException {
  13.     //获取文件名称
  14.     String originalFilename = f1.getOriginalFilename();
  15.     String destFilePath = String.format("E:\\idea\\springmvc-series\\chat04-uploadfile\\src\\main\\webapp\\upfile\\%s", originalFilename);
  16.     File destFile = new File(destFilePath);
  17.     //调用transferTo将上传的文件保存到指定的地址
  18.     f1.transferTo(destFile);
  20.     ModelAndView modelAndView = new ModelAndView();
  21.     modelAndView.setViewName("/WEB-INF/view/result.jsp");
  22.     modelAndView.addObject("msg", destFile.getAbsolutePath());
  23.     return modelAndView;
  24. }

上传的文件会被传入update1方法的第一个参数，注意第一个参数有个@RequestParam(“file1”)注解，这个注解的value就是表单中文件元素名称。

7、多文件上传

当上传多个文件的时候，可以使用多个MultipartFile参数来接收上传的文件。

表单代码

  1. <form method="post" action="upload2.do" enctype="multipart/form-data">
  2.     文件1：<input type="file" name="file1"><br/>
  3.     文件2：<input type="file" name="file2"><br/>
  4.     <input type="submit" value="提交">
  5. </form>

控制器代码

  1. /**
  2.  * 多文件上传
  3.  * 1、方法中指定多个MultipartFile，每个MultipartFile对应一个上传的文件
  4.  * 2、@RequestParam("file1") 用来指定具体接受上传的表单中哪个元素的名称
  5.  *
  6.  * @param f1
  7.  * @param f2
  8.  * @return
  9.  */
  10. @RequestMapping("/upload2.do")
  11. public ModelAndView upload2(@RequestParam("file1") MultipartFile f1,
  12.                             @RequestParam("file2") MultipartFile f2) {
  13.     System.out.println("f1：" + f1);
  14.     System.out.println("f2：" + f2);
  15.     ModelAndView modelAndView = new ModelAndView();
  16.     modelAndView.setViewName("/WEB-INF/view/result.jsp");
  17.     modelAndView.addObject("msg", null);
  18.     return modelAndView;
  19. }

我们上传2个图片，控制台输出

  1. f1：MultipartFile[field="file1", filename=1.jpg, contentType=image/jpeg, size=145615]
  2. f2：MultipartFile[field="file2", filename=2.jpg, contentType=image/jpeg, size=67713]

8、通过MultipartHttpServletRequest处理文件上传

MultipartHttpServletRequest接口

1、springmvc接受到上传文件的的请求之后，会将请求转换为MultipartHttpServletRequest类型的对象

2、MultipartHttpServletRequest中提供了一系列方法来获取请求中的所有参数信息

3、其中getParameterMap()用来获取非文件类型的参数列表

4、getMultiFileMap()方法用来获取上传的文件列表

下面来个案例，使用MultipartHttpServletRequest来处理上传的文件请求。

表单代码

下面表单中有2个文本，2个文件元素。

  1. <form method="post" action="upload3.do" enctype="multipart/form-data">
  2.     姓名：<input name="name" value="路人"/> <br/>
  3.     年龄：<input name="age" value="30"/><br/>
  4.     文件1：<input type="file" name="file1"><br/>
  5.     文件2：<input type="file" name="file2"><br/>
  6.     <input type="submit" value="提交">
  7. </form>

控制器代码

控制器中使用MultipartHttpServletRequest来获取所有参数信息，分了2部分获取

1、先使用request.getParameterMap()获取非文件类型的参数，即可以获取表单中的name和age这2个参数的信息

2、通过request.getMultiFileMap()获取文件类型的参数，即可以获取表单中file1和file2这2个文件的信息

稍后关注控制台的输出

  1. /**
  2.  * 使用MultipartHttpServletRequest处理多文件上传
  3.  * 上传文件的http请求会被转换为MultipartHttpServletRequest类型
  4.  * MultipartHttpServletRequest中提供了很多很多方法用来获取请求中的参数
  5.  *
  6.  * @param request
  7.  * @return
  8.  */
  9. @RequestMapping("/upload3.do")
  10. public ModelAndView upload3(MultipartHttpServletRequest request) {
  11.     //1.获取表单中非文件数据
  12.     System.out.println("---------获取表单中非文件数据---------");
  13.     Map<String, String[]> parameterMap = request.getParameterMap();
  14.     parameterMap.forEach((name, values) -> {
  15.         System.out.println(String.format("%s:%s", name, Arrays.asList(values)));
  16.     });
  17.     //2、获取表单中文件数据
  18.     System.out.println("---------获取表单中文件数据---------");
  19.     MultiValueMap<String, MultipartFile> multiFileMap = request.getMultiFileMap();
  20.     //2、遍历表单中元素信息
  21.     multiFileMap.forEach((name, files) -> {
  22.         System.out.println(String.format("%s:%s", name, files));
  23.     });
  25.     ModelAndView modelAndView = new ModelAndView();
  26.     modelAndView.setViewName("/WEB-INF/view/result.jsp");
  27.     modelAndView.addObject("msg", "上传成功");
  28.     return modelAndView;
  29. }

使用http client发起请求

这里我们使用idea中的http client这个插件来调用接口，http client插件是一个非常方便发起http请求额一个插件，测试接口特别容易，后面的大量案例中我们都会使用这个工具来快速测试接口的效果，所以这个工具，如果还不会的，建议去看一下这篇文章：

idea中的接口测试利器（http cient插件）

下面，我们在idea中创建一个UploadController.http文件，文件内容如下：

  1. ### 多文件上传
  2. POST http://localhost:8080/chat04/upload3.do
  3. Content-Type: multipart/form-data; boundary=bound1
  5. --bound1
  6. Content-Disposition: form-data; name="name"
  8. 路人
  9. --bound1
  10. Content-Disposition: form-data; name="age"
  12. 30
  13. --bound1
  14. Content-Disposition: form-data; name="file1"; filename="1.jpg"
  16. < ./1.jpg
  17. --bound1
  18. Content-Disposition: form-data; name="file2"; filename="2.jpg"
  19. Content-Type: image/jpeg
  21. < ./2.jpg
  22. --bound1--

控制台输出

  1. ---------获取表单中非文件数据---------
  2. name:[路人]
  3. age:[30]
  4. ---------获取表单中文件数据---------
  5. file1:[MultipartFile[field="file1", filename=1.jpg, contentType=*/*; charset=UTF-8, size=145615]]
  6. file2:[MultipartFile[field="file2", filename=2.jpg, contentType=image/jpeg, size=67713]]

9、自定义对象接收多文件上传

表单代码

这个表单用来输出用户信息:

姓名、年龄、头像图片、2张身份证图片

  1. <form method="post" action="upload4.do" enctype="multipart/form-data">
  2.     姓名：<input name="name" value="路人"/> <br/>
  3.     年龄：<input name="age" value="30"/><br/>
  4.     头像图片：<input name="headImg" type="file"/><br/>
  5.     多张身份证图片<br/>
  6.     <input name="idCardImg" type="file"/><br/>
  7.     <input name="idCardImg" type="file"/><br/>
  8.     <input type="submit" value="提交">
  9. </form>

自定义一个类

自定义了一个UserDto，来接收上面表单的参数。

  1. import org.springframework.web.multipart.MultipartFile;
  3. import java.util.List;
  5. public class UserDto {
  6.     //姓名
  7.     private String name;
  8.     //年龄
  9.     private Integer age;
  10.     //头像
  11.     private MultipartFile headImg;
  12.     //身份证（多张图像）
  13.     private List<MultipartFile> idCardImg;
  15.     //省略了get、set方法...
  16. }

控制器代码

  1. @RequestMapping("/upload4.do")
  2. public ModelAndView upload4(UserDto userDto) {
  3.     System.out.println("姓名：" + userDto.getName());
  4.     System.out.println("年龄：" + userDto.getAge());
  5.     System.out.println("头像文件：" + userDto.getHeadImg());
  6.     System.out.println("多张身份证文件：" + Arrays.asList(userDto.getIdCardImg()));
  8.     ModelAndView modelAndView = new ModelAndView();
  9.     modelAndView.setViewName("/WEB-INF/view/result.jsp");
  10.     modelAndView.addObject("msg", "上传成功");
  11.     return modelAndView;
  12. }

测试代码

这里我们还是使用http client插件发起请求

  1. ### 多文件上传
  2. POST http://localhost:8080/chat04/upload4.do
  3. Content-Type: multipart/form-data; boundary=bound1
  5. --bound1
  6. Content-Disposition: form-data; name="name"
  7. Content-Type: text/plain
  9. 路人
  10. --bound1
  11. Content-Disposition: form-data; name="age"
  12. Content-Type: text/plain
  14. 30
  15. --bound1
  16. Content-Disposition: form-data; name="headImg"; filename="1.jpg"
  18. < ./1.jpg
  19. --bound1
  20. Content-Disposition: form-data; name="idCardImg"; filename="2.jpg"
  21. Content-Type: image/jpeg
  23. < ./2.jpg
  24. --bound1
  25. Content-Disposition: form-data; name="idCardImg"; filename="3.jpg"
  26. Content-Type: image/jpeg
  28. < ./3.jpg
  29. --bound1--

控制台输出

输出如下，可以看到UserDto这个对象中的详细信息

  1. 姓名：路人
  2. 年龄：30
  3. 头像文件：MultipartFile[field="headImg", filename=1.jpg, contentType=*/*; charset=UTF-8, size=145615]
  4. 多张身份证文件：[[MultipartFile[field="idCardImg", filename=2.jpg, contentType=image/jpeg, size=67713], MultipartFile[field="idCardImg", filename=3.jpg, contentType=image/jpeg, size=39891]]]

12、扩展

MultipartResolver这个bean的名称为什么必须是multipartResolver？

springmvc中会使用MultipartResolver来解析上传文件的请求，具体代码在org.springframework.web.servlet.DispatcherServlet#doDispatch中

进入checkMultipart，如下，这里面关键代码就是会调用this.multipartResolver.resolveMultipart(request)来处理文件上传的请求

下面看一下this.multipartResolver从哪里来的，如下，是从springmvc容器中查找的，名称为multipartResolver，所以我们定义这个bean的时候，名称必须为这个。

13、案例代码如何运行？

step1：拉取代码

  1. https://gitee.com/javacode2018/springmvc-series

step2：导入idea

step3：代码结构

本文的案例在chat04-uploadfile模块中。

页面

本文的表单代码都在index.jsp中

控制器

本文的控制器代码都在UploadController类中，如下

http client测试案例代码

如下图，http client测试案例代码都在UploadController.http文件中，包含了4个案例的测试代码，大家可以点击之后直接运行。

step4：下载tomcat

  1. 链接：https://pan.baidu.com/s/1_Ol-UZkN_6woMBtjcFygvQ 
  2. 提取码：e66j

step5：将chat04-uploadfile部署到tomcat

step6：启动tomcat，验证效果

最新资料

更多内容请访问：IT源点

注意：本文归作者所有，未经作者允许，不得转载

#SpringMVC教程
阅读全部
相关文章推荐
  • 1

全部评论: 0 条

    我有话说: