快捷導(dǎo)航

利用SpringMVC接收復(fù)雜對(duì)象和多個(gè)文件(前端使用JQuery)

更新時(shí)間：2022年10月26日 11:47:00 作者：lxcoding

這篇文章主要介紹了利用SpringMVC接收復(fù)雜對(duì)象和多個(gè)文件(前端使用JQuery)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

前言

這里我先說(shuō)一下標(biāo)題中描述的復(fù)雜的對(duì)象是什么？

就是一個(gè)對(duì)象的成員變量不僅包含基本類型的成員變量（int），也包含自定義類成員變量(UserCategory)。

如果SpringMVC只是接收復(fù)雜的對(duì)象這一個(gè)參數(shù)，那我們有很多種辦法來(lái)處理這種情況，可以看看我前面寫(xiě)的文章（springmvc參數(shù)傳遞——基本數(shù)據(jù)類型和復(fù)雜對(duì)象）。

但這里我們要提到的是同時(shí)接收復(fù)雜的對(duì)象和多個(gè)文件。

將要使用的類和配置

//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配置文件中重要的部分內(nèi)容（一定要配置文件解析器）

 ....
<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>
       <!--上傳文件最大大?。J(rèn)單位為字節(jié)） 1024*1024*20（20M,1kb=1024byte） -->
       <property name="maxUploadSize" value="20971520"></property>
       <!--最大內(nèi)存  -->
       <property name="maxInMemorySize" value="20971520"></property>
  </bean>
  <mvc:annotation-driven></mvc:annotation-driven>
....

前端頁(yè)面和JS文件

HTML頁(yè)面

<body>
<div id="content">
    姓名：<input type="name"  id="name"/><br/>
    年齡：<input type="number"  id="age"/><br/>
    分類：<select id="user-category">
            <option data-value="1">學(xué)生</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文件

由于是復(fù)雜的對(duì)象，所以前臺(tái)只能發(fā)送user對(duì)象的json字符串（如果不是復(fù)雜的對(duì)象，前臺(tái)也可以直接發(fā)送user的json對(duì)象）

$(function(){
    /**
     * 自動(dòng)添加文件上傳控件
     * 針對(duì)商品詳情圖控件組，若該控件組的最后一個(gè)元素發(fā)生變化（即上傳了圖片）
     * 且控件總數(shù)未達(dá)到6個(gè)，則生成新的一個(gè)文件上傳控件
     */
    $('#img-div').on('change','#img:last-child',function () {
        if($('.detail-img').length<6){
            $('#img').append('<input type="file" class="detail-img"/><br/>');
        }
    })

    //點(diǎn)擊提交按鈕向后臺(tái)提交數(shù)據(jù)
    $('#submit').click(function () {
        var user={};
        user.name=$('#name').val();
        user.age=$('#age').val();
        //分類
        // find()方法獲得當(dāng)前元素集合中每個(gè)元素的后代中，通過(guò)選擇器、jQuery
        // 對(duì)象或元素來(lái)篩選，這里代表獲得所有id為shop-category元素的后代option元素
        // not()方法表示從匹配元素集合中刪除元素。參數(shù)function是用于檢測(cè)集合中每個(gè)元素的函數(shù)。
        // 下面的語(yǔ)句表示獲得被選中元素的data-id值
        user.userCategory={"userCategoryId":$('#user-category').find('option').not(function(){
            // this代表該DOM元素，返回true排除元素集合中的該元素，返回false則保留集合中的該元素
            return !this.selected;
        }).data('value')}  //或者寫(xiě)成().dataset.value

        //把前臺(tái)的信息存儲(chǔ)進(jìn)formData中，傳到后臺(tái)中
        var formData=new FormData();
        formData.append("user",JSON.stringify(user));

        //獲取文件
        $('.detail-img').map(function (index,item) {
            //判斷是否上傳了文件
            //$('xx')[0]是為了把JQuery對(duì)象轉(zhuǎn)換成JavaScript對(duì)象，操作JS的方法
            //files[0]是獲取第一個(gè)文件流（這里一個(gè)控件也只能上傳一個(gè)文件）
            if($('.detail-img')[index].files.length>0){
                //獲取第index控件的文件流 ，保存到formData中
                formData.append("detailImg",$('.detail-img')[index].files[0]);
            }
        });

        //使用ajax向后臺(tái)傳遞數(shù)據(jù)
        $.ajax({
            url:'/upload/test/adduser',
            type:'POST',
            data:formData,
            cache:false,
            // 如果要發(fā)送 DOM 樹(shù)信息或其它不希望轉(zhuǎn)換的信息，請(qǐng)?jiān)O(shè)置為 false。默認(rèn)情況下，
            // 通過(guò)data選項(xiàng)傳遞進(jìn)來(lái)的數(shù)據(jù)，如果是一個(gè)對(duì)象(技術(shù)上講只要不是字符串)，都會(huì)處理轉(zhuǎn)化成一個(gè)查詢字符串
            processData:false,
            // 不設(shè)置內(nèi)容類型
            contentType:false,
            dataType:'json',
            success:function (data) {
                if(data.success){
                    alert("添加用戶信息成功");
                }else{
                    alert("添加用戶信息失敗");
                }
            }
        })
    })
})

后臺(tái)使用SpringMVC接收數(shù)據(jù)

使用SpringMVC參數(shù)綁定

@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信息（具體按業(yè)務(wù)需要）
                ObjectMapper objectMapper=new ObjectMapper();
                User user=objectMapper.readValue(userStr,User.class);
                System.out.println(user);
                //模擬處理上傳的文件（具體按業(yè)務(wù)需要）
                System.out.println(imgs.length);
                modelMap.put("success",true);
            }catch (Exception e){
                System.out.println(e.toString());
                modelMap.put("success",false);
                modelMap.put("msg","內(nèi)部錯(cuò)誤");
            }
        }else{
            modelMap.put("success",false);
        }
        return modelMap;
    }
}

使用傳統(tǒng)的HttpServletRequest接收

使用這種方法有利于前端和后端的解耦

	@RequestMapping(value="/adduser",method = RequestMethod.POST)
    @ResponseBody
    private Map<String,Object> addUser(HttpServletRequest request) {
        Map<String, Object> modelMap = new HashMap<>();
        try {
            //1.從request請(qǐng)求中提取User信息
            String userStr = request.getParameter("user");
            ObjectMapper objectMapper = new ObjectMapper();
            User user = objectMapper.readValue(userStr, User.class);
            //2.從request請(qǐng)求中提取多個(gè)文件
            List<MultipartFile> files=new ArrayList<>();
            CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
            //判斷請(qǐng)求中是否有文件流
            if (commonsMultipartResolver.isMultipart(request)) {
                MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest)request;
                //MAX_FILE_COUNT為最大的文件上傳數(shù)量，跟前端規(guī)定最多只能上傳6個(gè)文件有關(guān)
                files=multipartRequest.getFiles("detailImg");
                //下面這種方法對(duì)于我們現(xiàn)在的場(chǎng)景不適用，因?yàn)槲覀兩蟼鞯奈募家粯?，map中key是唯一的
                //Map<String,MultipartFile> map=multipartRequest.getFileMap();
            }
            //根據(jù)具體業(yè)務(wù)邏輯處理user和files
            //........
            modelMap.put("success",true);
        } catch (Exception e) {
            modelMap.put("success",false);
        }
        return modelMap;
    }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: