利用SpringMVC接收复杂对象和多个文件(前端使用JQuery)
更新时间：2022年10月26日 11:47:00 作者：lxcoding
这篇文章主要介绍了利用SpringMVC接收复杂对象和多个文件(前端使用JQuery)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
前言
这里我先说一下标题中描述的复杂的对象是什么？
就是一个对象的成员变量不仅包含基本类型的成员变量（int），也包含自定义类成员变量(UserCategory)。
如果SpringMVC只是接收复杂的对象这一个参数，那我们有很多种办法来处理这种情况，可以看看我前面写的文章（springmvc参数传递——基本数据类型和复杂对象）。
但这里我们要提到的是同时接收复杂的对象和多个文件。
将要使用的类和配置
//User 用户
public class User {
private String name;
private int age;
private UserCategory userCategory;
//getter and setter
}//UserCategory 用户分类
public class UserCategory {
private Integer userCategoryId;
private String userCategoryName;
//getter and setter
}这里只展示spring-web.xml配置文件中重要的部分内容（一定要配置文件解析器）
....
<context:component-scan base-package="com.lxc.controller"></context:component-scan>
<mvc:default-servlet-handler></mvc:default-servlet-handler>
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"></property>
<!--上传文件最大大小（默认单位为字节） 1024*1024*20（20M,1kb=1024byte） -->
<property name="maxUploadSize" value="20971520"></property>
<!--最大内存 -->
<property name="maxInMemorySize" value="20971520"></property>
</bean>
<mvc:annotation-driven></mvc:annotation-driven>
....前端页面和JS文件
HTML页面
<body>
<div id="content">
姓名：<input type="name" id="name"/><br/>
年龄：<input type="number" id="age"/><br/>
分类：<select id="user-category">
<option data-value="1">学生</option>
<option data-value="2">老师</option>
<option data-value="3">管理员</option>
</select>
<div id="img-div">
<label>详情图：</label>
<div id="img">
<input type="file" class="detail-img"/><br/>
</div>
</div>
<input type="submit" id="submit" value="提交">
</div>
<script type="text/javascript" src="./resources/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="./resources/upload.js"></script>
</body>
JS文件
由于是复杂的对象，所以前台只能发送user对象的json字符串（如果不是复杂的对象，前台也可以直接发送user的json对象）
$(function(){
/**
* 自动添加文件上传控件
* 针对商品详情图控件组，若该控件组的最后一个元素发生变化（即上传了图片）
* 且控件总数未达到6个，则生成新的一个文件上传控件
*/
$('#img-div').on('change','#img:last-child',function () {
if($('.detail-img').length<6){
$('#img').append('<input type="file" class="detail-img"/><br/>');
}
})
//点击提交按钮向后台提交数据
$('#submit').click(function () {
var user={};
user.name=$('#name').val();
user.age=$('#age').val();
//分类
// find()方法获得当前元素集合中每个元素的后代中，通过选择器、jQuery
// 对象或元素来筛选，这里代表获得所有id为shop-category元素的后代option元素
// not()方法表示从匹配元素集合中删除元素。参数function是用于检测集合中每个元素的函数。
// 下面的语句表示获得被选中元素的data-id值
user.userCategory={"userCategoryId":$('#user-category').find('option').not(function(){
// this代表该DOM元素，返回true排除元素集合中的该元素，返回false则保留集合中的该元素
return !this.selected;
}).data('value')} //或者写成().dataset.value
//把前台的信息存储进formData中，传到后台中
var formData=new FormData();
formData.append("user",JSON.stringify(user));
//获取文件
$('.detail-img').map(function (index,item) {
//判断是否上传了文件
//$('xx')[0]是为了把JQuery对象转换成JavaScript对象，操作JS的方法
//files[0]是获取第一个文件流（这里一个控件也只能上传一个文件）
if($('.detail-img')[index].files.length>0){
//获取第index控件的文件流 ，保存到formData中
formData.append("detailImg",$('.detail-img')[index].files[0]);
}
});
//使用ajax向后台传递数据
$.ajax({
url:'/upload/test/adduser',
type:'POST',
data:formData,
cache:false,
// 如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。默认情况下，
// 通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串
processData:false,
// 不设置内容类型
contentType:false,
dataType:'json',
success:function (data) {
if(data.success){
alert("添加用户信息成功");
}else{
alert("添加用户信息失败");
}
}
})
})
})后台使用SpringMVC接收数据
使用SpringMVC参数绑定
@RequestMapping("/test")
@Controller
public class ParamController {
@RequestMapping(value="/adduser",method = RequestMethod.POST)
@ResponseBody
private Map<String,Object> addUser(@RequestParam("user")String userStr, @RequestParam("detailImg")MultipartFile[] imgs){
Map<String,Object> modelMap=new HashMap<>();
if(userStr!=null&&imgs.length>0){
try{
//模拟处理user信息（具体按业务需要）
ObjectMapper objectMapper=new ObjectMapper();
User user=objectMapper.readValue(userStr,User.class);
System.out.println(user);
//模拟处理上传的文件（具体按业务需要）
System.out.println(imgs.length);
modelMap.put("success",true);
}catch (Exception e){
System.out.println(e.toString());
modelMap.put("success",false);
modelMap.put("msg","内部错误");
}
}else{
modelMap.put("success",false);
}
return modelMap;
}
}使用传统的HttpServletRequest接收
使用这种方法有利于前端和后端的解耦
@RequestMapping(value="/adduser",method = RequestMethod.POST)
@ResponseBody
private Map<String,Object> addUser(HttpServletRequest request) {
Map<String, Object> modelMap = new HashMap<>();
try {
//1.从request请求中提取User信息
String userStr = request.getParameter("user");
ObjectMapper objectMapper = new ObjectMapper();
User user = objectMapper.readValue(userStr, User.class);
//2.从request请求中提取多个文件
List<MultipartFile> files=new ArrayList<>();
CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
//判断请求中是否有文件流
if (commonsMultipartResolver.isMultipart(request)) {
MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest)request;
//MAX_FILE_COUNT为最大的文件上传数量，跟前端规定最多只能上传6个文件有关
files=multipartRequest.getFiles("detailImg");
//下面这种方法对于我们现在的场景不适用，因为我们上传的文件名都一样，map中key是唯一的
//Map<String,MultipartFile> map=multipartRequest.getFileMap();
}
//根据具体业务逻辑处理user和files
//........
modelMap.put("success",true);
} catch (Exception e) {
modelMap.put("success",false);
}
return modelMap;
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
客户端发出一个请求，链上的对象都有机会来处理这一请求，而客户端不需要知道谁是具体的处理对象。这样就实现了请求者和接受者之间的解耦，并且在客户端可以实现动态的组合职责链。使编程更有灵活性2022-07-07
这篇文章主要介绍了详解MyBatis多数据源配置(读写分离)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
在 Java 编程的精彩世界里,方法重写是一项极为重要且实用的特性,它犹如一把神奇的钥匙,为我们开启了面向对象编程中多态性的大门,今天,就让我们一同深入探索 Java 方法重写的奥秘,感兴趣的小伙伴跟着小编一起来看看吧2025-03-03
这篇文章主要介绍了Mybatis Generator逆向工程的使用详细教程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
本篇文章主要介绍了Spring MVC学习笔记之json格式的输入和输出，这里整理了详细的代码,有需要的小伙伴可以参考下。2017-03-03
这篇文章主要介绍了详解IntelliJ IDEA2020.1和JDK14体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了使用Spring Boot进行单元测试详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了Mybatis generator的使用,非常不错，具有参考借鉴价值，对mybatis generator的使用相关知识感兴趣的朋友一起学习吧2016-09-09
这篇文章主要为大家介绍了Apache Arrow Parquet存储与使用原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
Map用于保存具有映射关系的数据，Map集合里保存着两组值，一组用于保存Map的ley，另一组保存着Map的value，可以理解为Map中的元素是两个对象，一个对象作为键，一个对象作为值。键不可以重复，但是值可以重复2021-11-11
最新评论