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" ;
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~