需求描述
我们常用的就是form表单实现文件上传,通过一个submit的按钮提交form即可。但是,我们常会发现这种方式既不灵活,比如:我们希望在提交表单之前对参数进行加工;对上传文件进行判断;后台我们希望参数可以是json对象就好了,而不是每次request.getParameter()。
痛点解决
HTML部分
<input type="file" multiple="multiple" id="supervise_file">
JS部分
var formData = new FormData();
//把多个文件追加到formData
$.each( $('#supervise_file')[0].files,function(i,e){
formData.append('files', e);
});
//把参数包装对象
var obj = {};
obj.a=1;
obj.b=2;
formData.append('param', JSON.stringify(obj));
//post请求提交数据
$.ajax({
url : '/supervise/manage/save',
type : 'POST',
cache : false,
data : formData,
processData : false,
contentType : false
}).done(function(json) {
alert("提交成功!")
}).fail(function(error) {
alert("提交失败!");
});
JAVA部分
@PostMapping("save")
@ResponseBody
public ResponseResult<String> save(
@RequestParam("param") String param,
@RequestParam(name = "files", required = false) MultipartFile[] files) {
// fastjson对象转化
ReportUpdateDto dto = JSON.parseObject(param, ReportUpdateDto.class);
//业务处理
}