SpringBoot+Ajax文件上傳+FormData表單提交

需求

前端：
html定義好form表單的輸入信息（text+file）標籤
js經過Ajax異步提交表單中的內容。
後端：
經過接口接收表單中的數據（String+MultipartFile）

實現

HTML部分 ：html定義好form表單的輸入信息（text+file）標籤

//定義好id，ajax會用到
 <form id="form-add">
    //單選項 （解釋：name要與接口的參數名對應起來，value是對應值）
    <input type="radio" name="imageNameIndex"  value="1"> 一號位
    <input type="radio" name="imageNameIndex"  value="2"> 二號位
    <input type="radio" name="imageNameIndex"  value="3"> 二號位

    //文字 （解釋：name要與接口的參數名對應起來）
    <input type="text" name="url">

    //文件 （解釋：name要與接口的參數名對應起來）
    <input type="file" name="file">

    //提交 （解釋：這個按鈕的惟一做用就是觸發提交的js方法）
    <button type="button"  onclick="submitFunction()">提交</button>                
</form>

JS部分：首先你得先引入JQuery。

function submitFunction() {
    //這裏惟一須要注意的就是這個form-add的id
    var formData = new FormData($("#form-add")[0]);
    $.ajax({
        //接口地址
        url: '/submit' ,
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            //成功的回調
            if(data.code == 300){

            }

        },
        error: function (returndata) {
           //請求異常的回調
           // modals.warn("網絡訪問失敗，請稍後重試!");
        }
    });
}

後端Controller部分

@RequestMapping(value = "/submit", method = RequestMethod.POST)
    public BaseBody submit(String imageNameIndex, String url, MultipartFile file)
            throws Exception {

        //這裏就能夠獲取裏面的上傳過來的數據了

        //作一些存庫操做，以及返回的數據

    }