前言
這裏我先說一下標題中描述的複雜的對象是什麼？就是一個對象的成員變量不僅包含基本類型的成員變量（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;
}