ssm 同时接受json数据和图片
采用JSON格式提交数据,controller通过@RequestBody获取数据并且映射到对应的对象去,前端在提交数据的时候需要将HTTP的Headers头里的Content-Type设置成application/json才行。
@RequestBody对应的类型是application/json,而文件Multipart对应的类型是multipart/form-data,这两种格式不兼容,所以无论怎么写都是调用失败的。
解决方法:
将Content-type类型设置为multipart/form-data;
将json数据转为字符串当做一个参数传递,(parm:json_str)
后端通过FastJSON转化。
前段
let fields = $('#info_form').serializeArray();
//将表单转换成json对象
let obj = {};
$.each(fields, function (index, field) {
obj[field.name] = field.value; //通过变量,将属性值,属性一起放到对象中
})
let formData = new FormData();
formData.append('file', $('#imgFile')[0].files[0])
formData.append('param',JSON.stringify(obj));
$.ajax({
url:"${pageContext.request.contextPath}/upload.do",
type:"post",
data:formData,
processData:false,//必须
contentType:false,//必须
success:function(data){
console.log("over..");
},
error:function(e){
alert("错误!!");
}
});
后端
@PostMapping("/upload")
public String uploadFile(MultipartFile file,String param,
HttpServletRequest request) throws Exception {
System.out.println(param);
if (file != null && !file.isEmpty()) {
// 原始名称
String originalFilename = file.getOriginalFilename();
// 图片存放的webroot物理路径
String webroot = request.getServletContext().getRealPath("/");
// 新图片相对路径
String filepath = "/upload/"+UUID.randomUUID()
+ originalFilename.substring(originalFilename.lastIndexOf("." ));
// 新建图片(物理路径+图片名)
File realpath = new File(webroot + filepath );
System.out.println(filepath);
// 将内存中的数据写入磁盘
file.transferTo(realpath);
}
// 调用服务更新客户信息
return "show" ;
}