jeesite4列表页面显示多个图片

效果图：

首先实体类中，在保存的时候我的实体类中，有一个字段保存了多个图片的路径在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，我在自己的项目已经修改，但是我懒得改这里了

jeesite4列表页面显示多个图片

猜你喜欢