一.spring配置文件上传支持

PS：

CommonsMultipartResolver是spring提供的文件流接收对象，支持多文件上传

3个属性我就不解释了，一看就懂。

二.java方法

@ResponseBody

@RequestMapping(value = "/save" , method = RequestMethod.POST)

public ResultDto saveRoute(HttpServletRequest request,RouteInfo routeInfo,

@RequestParam(value = "file",required = false) CommonsMultipartFile[] files,

HttpServletResponse response) {

}

PS：

RouteInfo是我的业务对象，

CommonsMultipartFile要支持多文件上传就在后面加[]

三，文件处理

for(MultipartFile multipartFile:multipartFiles){

CommonImgInfo imgModel = new CommonImgInfo();

//文件的原始名称

String originalFilename = multipartFile.getOriginalFilename();

String newFileName = null;

if (multipartFile != null && StringUtils.isNotBlank(originalFilename)){

imgModel.setFileName(originalFilename);

//newFileName = UUID.randomUUID() + originalFilename;

newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."), originalFilename.length());

//存储图片的物理路径

String pic_path = request.getSession().getServletContext().getRealPath(Config.UPLOAD_SAVEPATH);

//获取文件类型

String contentType = multipartFile.getContentType();

//获得文件后缀名称

String imageName = contentType.substring(contentType.indexOf(File.separator) + 1);

File fileParent = new File(pic_path);

if(!fileParent.exists()) {

fileParent.mkdir();

}

imgModel.setMimeType(imageName);

SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");

String mills = format.format(System.currentTimeMillis());

String path = pic_path + File.separator + mills+ File.separator;

File f = new File(path);

//如果文件夹不存在,创建文件夹

if(!f.exists()) {

f.mkdir();

}

//新图片路径

File targetFile = new File(path, newFileName);

//内存数据读入磁盘

multipartFile.transferTo(targetFile);

String targetPath = File.separator + Config.UPLOAD_SAVEPATH + File.separator + mills + File.separator + newFileName;

imgModel.setLocation(targetPath);

imgModel.setContentSize(multipartFile.getSize());

newFileNames.add(imgModel);

}

}

ps：

CommonImgInfo是我们专门为文件建立的一个对象，里面的字段有：

原始文件名/新文件名/文件存储路径/文件后缀名/业务类型/业务关联id/文件大小/时间

三，前端页面

使用的就是input标签，type为file

选择图片

美化下按钮，这里顺带给样式大家

.inputfile {

opacity: 0;

}

效果：

上面每次选定图片后实际是通过js增加的一个img标签，然后有删除x的是通过div写的，也提供给大家吧

x

大家动态去拼接吧。

提交使用formData + jquery的ajax，关键代码：

var formData = new FormData(document.getElementById("routeInfoForm"));

if(filesArr.length > 0){

for(var i = 0;i < filesArr.length;i++){

formData.append('file',filesArr[i]);

}

}

formData.append('id',vm.id);

formData.append('routeName',vm.routeName);

formData.append('wifiPwd',vm.wifiPwd);

formData.append('routeUserName',vm.routeUserName);

formData.append('routePwd',vm.routePwd);

formData.append('factoryId',vm.manufacturerId);

formData.append('model',vm.model);

formData.append('companyId',vm.companyId);

formData.append('addressDetail',vm.addressDetail);

formData.append('onLineStatus',vm.onLineStatus);

formData.append('factoryName',vm.manufacturers.find(item => item.id === vm.manufacturerId)['name']);

ps：

filesArr是我自己定义的数组，存储的就是input的file对象的file。

注意多文件的处理，key是一样的都是file，只是内容不同而已。

其他参数也是通过append添加，忽略这里的vue取值。

到后台spring会自动把这些前台属性注入到对应的业务对象属性，而file则会使用CommonsMultipartFile接收

最后是jquery的ajax方法

$.ajax({

type:"post",

url: ctx + "/routeManager/save",

data: formData,

dataType : 'json',

async: false,

cache: false,

contentType: false,

processData: false,

success:function(data){

if(data.status == 0) {

layer.alert('创建成功！', function(){

var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

parent.layer.close(index);//再执行关闭

});

}else {

layer.msg(data.returnMsg);

}

},error:function(data) {

layer.msg(data.returnMsg);

}

});

好了，到这里关键代码基本就都完成了，剩下该你表现了。能帮到大家，希望点个赞