使用FormData需要传给后端对象信息。
使用FormData传对象是用key-value形式的，所以传对象不能传整个对象，要传属性，
后端接口用对象接收即可，因为可以将传来的属性自动封装到实体类中（前端传来的属性名称和实体类
的属性名称一定要一致，否则无法封装）。
jsp：
<form method="post" id="exhibtionForm" enctype="multipart/form-data">
<!-- 第一行 -->
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<div class="form-input text-center">
<img src="" id="thumbnail" height="250" width="300" one rror="this.src='../picture/previewFile.png';this.οnerrοr=null;" />
<input type="file" class="m-2" id="exhibitionFile" name="fileName" onchange="previewFile()" />
</div>
</div>
</div>
<%-- 第一行第2列 --%>
<div class="col-xl-4">
<div class="form-group">
<input type="text" class="form-control" name="exName" id="exName" placeholder="展品名称">
</div>
<div class="form-group">
<input type="text" class="form-control" name="sortOrder" id="sortOrder" placeholder="展品次序">
</div>
<div class="form-group">
<input type="text" class="form-control" name="cId2" id="cId2" placeholder="展品类型2(子类型)">
</div>
<div class="form-group">
<select class="form-control form-select" name="typee" id="typee">
<option selected>展品文件属性（请根据上传文件选择）</option>
<option value="3D">3D文件</option>
<option value="图片">图片</option>
<option value="音频">音频</option>
</select>
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<select class="form-control form-select" name="exStatus" id="exStatus">
<option selected>展品状态</option>
<option value="1">展出</option>
<option value="0">禁用</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" name="cId1" id="cId1" placeholder="展品类型1(子类型)">
</div>
<div class="form-group">
<input type="text" class="form-control" name="cId3" id="cId3" placeholder="展品类型3(子类型)">
</div>
<div class="form-group">
<input type="text" class="form-control" name="exSize" id="exSize" placeholder="文件尺寸">
</div>
.....
<div class="form-group text-right">
<input type="submit" class="btn btn-primary float-end" id="addExhibition" value="确认添加" onclick="addEx()"/>
</div>
</div>
</div>
</form>
javascript:
var fileData;
$('[name="fileName"]').change(function(e) {
fileData = e.target.files[0]
});
function addEx(){
var formData = new FormData();
formData.append('file',fileData);
formData.append('exName',$("#exName").val());
formData.append('sortOrder',$("#sortOrder").val());
formData.append('cId2',$("#cId2").val());
formData.append('typee',$("#typee").val());
formData.append('exStatus',$("#exStatus").val());
formData.append('cId1',$("#cId1").val());
formData.append('cId3',$("#cId3").val());
formData.append('exSize',$("#exSize").val());
formData.append('author',$("#author").val());
formData.append('authorSex',$("#authorSex").val());
formData.append('period',$("#period").val());
formData.append('exPoint',$("#exPoint").val());
formData.append('exDesc',$("#exDesc").val());
$.ajax({
url: '/exhibition/addex',
type: 'post',
data: formData,
cache: false,
contentType: false, // 不使用默认请求头类型 application/x-www-form-urlencoded; charset=UTF-8
processData: false, // 不序列化
success: function(data) {
if (data.errorCode == "100"){
alert("上传成功");
}
if (data.errorCode == "200"){
alert("上传失败");
}
},
error: function (){
alert("服务器正忙，请稍后再试...")
}
});
}
Controller:
@Controller
@RequestMapping("/exhibition")
public class ExhibitionController {
@Autowired
private ExhibitionService exhibitionService;
@RequestMapping(value = "/addex",method = RequestMethod.POST)
@ResponseBody
public ResponseMessage exhibitionAddEX(Exhibition exhibition, ExDesc exDesc ,@RequestParam("file") List<MultipartFile> uploadfile,
HttpServletRequest request){
System.out.println("到后台啦");
ResponseMessage responseMessage = exhibitionService.addEx(exhibition, exDesc, uploadfile, request);
return responseMessage;
}
}
Service:
@Service
public class ExhibitionServiceImpl implements ExhibitionService{
@Autowired
private ExhibitionMapper exhibitionMapper;
@Autowired
private ExDescMapper exDescMapper;
@Override
public ResponseMessage addEx(Exhibition exhibition, ExDesc exDesc, List<MultipartFile> uploadfile, HttpServletRequest request) {
if (!uploadfile.isEmpty() && uploadfile.size() > 0) {
//循环输出上传文件
for (MultipartFile file : uploadfile) {
//获取上传文件原始名
String originalFilename = file.getOriginalFilename();
System.out.println(originalFilename);
//设置上传文件的保存地址目录
String dirPath = request.getServletContext().getRealPath("/upload/");
File filePath = new File(dirPath);
System.out.println(dirPath);
//如果保存文件的地址不存在,就先新建目录
if (!filePath.exists()) {
filePath.mkdirs();
}
//使用uuid重新命名上传的文件名称
String newFilename = UUID.randomUUID() + "_" + originalFilename;
System.out.println(newFilename);
try {
//使用MultipartFile接口的方法完成文件的上传到指定位置
file.transferTo(new File(dirPath, newFilename));
} catch (Exception e) {
e.printStackTrace();
return ResponseMessage.error().addObject("msg", "上传失败");
}
exhibition.setFileAddress(dirPath);
exhibition.setFileName(newFilename);
exhibition.setCreated(new Date());
exhibition.setUpdated(new Date());
exhibitionMapper.insert(exhibition);
System.out.println(exhibition.getExId());
exDesc.setExId(exhibition.getExId());
exDesc.setCreated(new Date());
exDesc.setUpdated(new Date());
exDescMapper.insert(exDesc);
}
return ResponseMessage.success();
} else {
return ResponseMessage.error().addObject("msg", "上传失败");
}
}
}
public interface ExhibitionService {
ResponseMessage addEx(Exhibition exhibition , ExDesc exDesc, List<MultipartFile> uploadfile,
HttpServletRequest request);
}
}
数据库（对应了POJO类）：