效果图:
首先实体类中,在保存的时候 我的实体类中,有一个字段保存了多个图片的路径在photo中
/**
* 保存py_narcotics
*/
@RequiresPermissions("py:pyNarcotics:edit")
@PostMapping(value = "save")
@ResponseBody
public String save(@Validated PyNarcotics pyNarcotics) {
//处理图片上传
if(pyNarcotics.getId() == null || pyNarcotics.getId().equals("")){
//新增保存的时候实体是没有ID的,要先设置Id,并且setIsNewRecord,不然调用的是update方法,保存不了
pyNarcotics.setId(IdGen.nextId());
pyNarcotics.setIsNewRecord(true);
}
//保存图片目录(索引)到js_sys_file_upload表中
FileUploadUtils.saveFileUpload(pyNarcotics.getId(), "pyNarcotics_image");
//jeesite默认保存的图片路径为application.yml里面配置的file下的baseDir下后接着 \\userfiles\fileupload\年月(201906)\xxx.jpg
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
String yearMonth = sdf.format(new Date());
String url = new String();
StringBuilder photoUrl = new StringBuilder();
//再去遍历是因为上传后的图片并不是上传时候图片的名称了,是js_sys_file_upload的file_id字段
List<FileUpload> fileUpload = FileUploadUtils.findFileUpload(pyNarcotics.getId(), "pyNarcotics_image");
for(FileUpload fu:fileUpload){
//多个图片按逗号拼接
url = "/userfiles/fileupload/" + yearMonth +"/" +fu.getFileEntity().getFileId()+".jpg";
photoUrl.append(url + ",");
}
photoUrl.deleteCharAt(photoUrl.length()-1);
//将路径保存到实体的photo中
pyNarcotics.setPhoto(photoUrl.toString());
pyNarcoticsService.save(pyNarcotics);
return renderResult(Global.TRUE, text("保存成功!"));
}
我的list前端页面代码:
{header:'${text("照片")}', name:'photo', index:'a.photo', width:200, align:"center",frozen:true,formatter: function(val, obj, row, act){
var url = row.photo;
var arr = url.split(",");
var imgs="";
for(var i=0; i<arr.length; i++){
var imgs = imgs+'<img src="${contextStr}'+arr[i]+'"style="width:80px;hight:60px;margin-left:10px;">';
}
return imgs;
}},
最后可能还有一些细节的问题,BUG,我在自己的项目已经修改,但是我懒得改这里了