SpringBoot+Ajax文件上传+FormData表单提交

需求

前端：
html定义好form表单的输入信息（text+file）标签
js通过Ajax异步提交表单中的内容。
后端：
通过接口接收表单中的数据（String+MultipartFile）

实现

HTML部分 ：html定义好form表单的输入信息（text+file）标签

//定义好id，ajax会用到
 
"form-add">
    //单选项 （解释：name要与接口的参数名对应起来，value是对应值）
    type="radio" name="imageNameIndex"  value="1"> 一号位
    type="radio" name="imageNameIndex"  value="2"> 二号位
    type="radio" name="imageNameIndex"  value="3"> 二号位

    //文字 （解释：name要与接口的参数名对应起来）
    type="text" name="url">

    //文件 （解释：name要与接口的参数名对应起来）
    type="file" name="file">

    //提交 （解释：这个按钮的唯一作用就是触发提交的js方法）
    type="button"  onclick="submitFunction()">提交                

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 {

        //这里就可以获取里面的上传过来的数据了

        //做一些存库操作，以及返回的数据

    }

转载于:https://www.cnblogs.com/kevinyau/p/11084394.html