Springboot formdata ajax 表单数据和图片一起上传

html文件代码片段

<form id="studentAddForm" method="post" enctype="multipart/form-data" οnsubmit="return false">
	学号：
	<input id="studentNo" name="studentNo" type="text">
	</br>
	姓名：
	<input id="studentName" name="studentName" type="text">
	</br>
	性别：
	<input id="studentSex" name="studentSex" type="text">
	</br>
	头像：
	<input id="file" name="file" type="file">
	</br>
	<input type="button" value="添加" οnclick="checkForm()">
</form>

JS代码

<script>
    function checkForm() {
        var formData = new FormData($("#studentAddForm")[0]);
        $.ajax({
            url : "/saveStudentInfo",
            type : 'POST',
            data : formData,
            cache: false,
            async: false,
            processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
            contentType : false,  //必须false才会自动加上正确的Content-Type

            success: function (data) {
                console.log("成功");
		/*
		layer.alert("增加成功", {icon: 6}, function () {
                    window.parent.location.reload(); //刷新父页面
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);
                });
		*/
            },
            error: function (data) {
                console.log("失败");
		/*
		layer.msg(data.message, {time: 2000});
		*/
            }
        });
    }
</script>

其中 

• processData设置为false。因为data值是FormData对象，不需要对数据做处理。
• <form>标签添加enctype="multipart/form-data"属性。
• cache设置为false，上传文件不需要缓存。
• contentType设置为false，不设置contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为<input>中声明的是name="file"

processData： 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

参考如下链接：

https://segmentfault.com/a/1190000007207128

https://blog.csdn.net/inuyasha1121/article/details/51915742

https://blog.csdn.net/ISaiSai/article/details/52211712 （1楼评论）

JAVA

controller

@RequestMapping(value = "/saveStudentInfo", method= RequestMethod.POST)
public ResponseData studentInfoSave(@RequestParam("file") MultipartFile file, StudentInfoDO studentTemp) {

	String filename = URLEncoder.encode(file.getOriginalFilename(), "utf-8");

    InputStream inputStream = file.getInputStream();
	
	...//上传到第三方服务器（例如使用FTP传到自己搭建的FTP服务器）
	
	StudentInfoDO.setPicPath("ftp://ftphost:port/imageDir/" + filename);
	
	...//在Dao层将学生信息存到数据库
	
	...//其他
	
	return ResponseData.success("success","success");
}   

StudentInfoDO

import java.io.Serializable;

public class StudentInfoDO implements Serializable {
    
    String studentNo;
    
    String studentName;
    
    String studentSex;
    
    String picPath;

    public String getStudentNo() {
        return studentNo;
    }

    public void setStudentNo(String studentNo) {
        this.studentNo = studentNo;
    }

    public String getStudentName() {
        return studentName;
    }

    public void setStudentName(String studentName) {
        this.studentName = studentName;
    }

    public String getStudentSex() {
        return studentSex;
    }

    public void setStudentSex(String studentSex) {
        this.studentSex = studentSex;
    }

    public String getPicPath() {
        return picPath;
    }

    public void setPicPath(String picPath) {
        this.picPath = picPath;
    }
}

PS：本次开发时查了很多各位大佬们的分享，主要纠结点在：AJAX将表单数据和图片提交给后台，后台一直接收不到，

processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
contentType : false,  //必须false才会自动加上正确的Content-Type

这两个字段也这么设置过了可是Request Headers中的 Content-Type:false，可是后台一直接收不到数据，请求状态一直是500，后来查了半天最后居然是前台页面引用的jquery文件有问题，换了个引用结果就好了。。。。哎。。

这个错误出来之后一直找不到原因，后来暂时使用form表单的action动作进行的提交并没有使用AJAX,后台是可以接收到数据的，这个也是一个思路，但因为AJAX还是有优势的，所以找到原因后又换回来了，总结下方便自己以后使用，也方便他人参考。

另： 本文中代码是简写的，从项目中扒出来改的，一是方便大家看，而是不至于透露项目信息，所以可能有错，但关键点的代码和使用方式是没问题的，当然也欢迎大家指正问题。