Jeesite4图片上传

关于图片上传这个问题,需要注意几个问题

1.我们在代码生成的时候就定义好,允许上传图片,在html页面中的form里就会有,图片上传的这个功能

2.如果之前生代码的时候没有考虑到,后面要是想添加的话,千万不要忘了,在html页面的第一行libs中引’fileupload’,如果这个不引,上传图片的框框也就不会出来

3.我们需要用 form:fileupload这个组件来进行图片上传中间定义了很多属性,大家一定要去翻看文档,文档地址:https://my.oschina.net/thinkgem/blog/1561129#h3_19

fileupload 文件上传

1、文件上传：<#form:fileupload id="upload1" bizKey="${user.id}" bizType="user_upload1"
uploadType="all" class="required" readonly="false"/>
后台代码：FileUploadUtils.saveFileUpload(user.getId(), "user_upload1");

2、图片上传：
#form:fileupload id="upload2" bizKey="${user.id}" bizType="user_upload2"
uploadType="image" class="required" readonly="false"/>
后台代码：FileUploadUtils.saveFileUpload(user.getId(), "user_upload2");

3、返回路径：
<#form:fileupload id="upload3" returnPath="true"
filePathInputId="upload3Path" fileNameInputId="upload3Name"
uploadType="image" readonly="false" maxUploadNum="3" isMini="false"/>
<#form:input name="upload3Path" class="form-control"/>
<#form:input name="upload3Name" class="form-control"/>

组件属性：

var p = {

// 标签参数
id: id!,					// 元素ID

bizKey: bizKey!,			// 业务表的主键值（与附件关联的业务数据）
bizType: bizType!,			// 业务表的上传类型（全网唯一，推荐格式：实体名_上传类型，例如，文章图片：article_photo）

returnPath: @ObjectUtils.toBoolean(returnPath!false), 	// 是否是返回文件路径到输入框（默认false），可将路径直接保存到某个字段里
filePathInputId: filePathInputId!,	// 设置文件URL存放的输入框的ID，当returnPath为true的时候，返回文件URL到这个输入框
fileNameInputId: fileNameInputId!,	// 设置文件名称存放的输入框的ID，当returnPath为true的时候，返回文件名称到这个输入框

uploadType: uploadType!'',			// 上传文件类型：all、file、image、media，若不设置，则自动根据上传文件后缀获取
class: class!'',					// 标签框的CSS类名，设置 required 加入必填验证
readonly: @ObjectUtils.toBoolean(readonly!false),		// 是否只读模式，只读模式下为查看模式，只允许下载

allowSuffixes: allowSuffixes!'', 	// 允许上传的后缀，前台的限制，不能超越file.*AllowSuffixes的设置，例如：.jpg,.png,
maxUploadNum: @ObjectUtils.toInteger(maxUploadNum!300),		// 多文件下允许最多上传几个，默认300个，设置-1代表不限制

imageMaxWidth: @ObjectUtils.toInteger(imageMaxWidth!1024),	// 图片压缩，最大宽度（uploadType为image生效），设置-1代表不做任何处理
imageMaxHeight: @ObjectUtils.toInteger(imageMaxHeight!768),	// 图片压缩，最大宽度（uploadType为image生效），设置-1代表不做任何处理

isLazy: @ObjectUtils.toBoolean(isLazy!false),				// 设置为ture需要点击上传按钮才上传文件，否则选择后就直接上传

isMini: @ObjectUtils.toBoolean(isMini!false),				// 是否是精简上传窗口，无边距，无边框

preview: preview!'',										// 是否显示预览按钮，接受参数：weboffice

};

3.接下来就是我们需要注意的几个地方

###### 后台代码:

4.如果上传多张图片,它默认的是存储图片路径用的是 "|"来分隔,所以在前台展示的时候,如果你需要展示多图片你可以参考下面的代码,这段代码比较通用

下面我附上我的代码:

list页面显示:

{header:'${text("广告图片")}', name:'adImg', index:'a.ad_img', width:150, align:"center", frozen:true,formatter: function(val, obj, row, act){
                var imgs="";
                var strs= new Array(); //定义一数组
                strs = val.split("\|"); //字符分割
                for (var i=0;i<strs.length ;i++ ){
                    imgs += '<img src="'+strs[i]+'" style="width: 80px;height: 60px;margin-left: 10px;">';
                }
                return imgs;
            }},

form页面上传

<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2"/>
							<span class="required ">*</span> ${text('图片上传')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-10">
								<#form:fileupload id="uploadImage" returnPath="true" filePathInputId="adImg" bizKey="${ad.id}" bizType="ad_image"
									uploadType="image" class="form-control required" readonly="false" maxUploadNum="1"/>
							</div>
						</div>
					</div>

后台Save方法代码

/**
	 * 保存广告
	 */
	@RequiresPermissions("ad:ad:edit")
	@PostMapping(value = "save")
	@ResponseBody
	public String save(@Validated Ad ad) {
		if(ad.getIsNewRecord()){
			ad.setAdId(IdGen.nextId());
		}
		//处理图片上传
		FileUploadUtils.saveFileUpload(ad.getAdId(),"ad_image");
		adService.save(ad);
		return renderResult(Global.TRUE, text("保存广告成功！"));
	}