Jeesite 4.x 图片上传相关

Author Avatar
小林QAQ 08月 05,2019
  • 在其它设备中阅读本文章

首先是Jeesite官网对fileupload文件上传组件的介绍(图片部分):
图片上传:
<#form:fileupload id="upload2" bizKey="$
" bizType="user_upload2"
uploadType="image" class="required" readonly="false"/>
后台代码:FileUploadUtils.saveFileUpload(user.getId(), "user_upload2");
注意:为什么没有保存 bizKey 和 bizType 值到后台,因为在上传文件的时候,新增的表单还没有生成主键,当你点击表单保存后,后台代码调用 FileUploadUtils.saveFileUpload 更新这两个值,才会真正建立文件和业务数据的关系。

fileupload组件属性:
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代表不限制
	
	cueWords: cueWords!'',		// 提示语,默认:或将照片(文件)拖到这里,最多可选 maxUploadNum 张(个) v4.1.5

	imageMaxWidth: @ObjectUtils.toInteger(imageMaxWidth!1024),	// 图片压缩,最大宽度(uploadType为image生效),设置-1代表不做任何处理
	imageMaxHeight: @ObjectUtils.toInteger(imageMaxHeight!768),	// 图片压缩,最大宽度(uploadType为image生效),设置-1代表不做任何处理
	
	serviceUpload: serviceUpload!(ctxAdmin+'/file/upload'),			// 上传文件后台服务  v4.1.5
	serviceDownload: serviceDownload!(ctxAdmin+'/file/download/'),	// 下载文件后台服务  v4.1.5
	serviceFileList: serviceFileList!(ctxAdmin+'/file/fileList'),	// 查询文件后台服务  v4.1.5
	
	extendParams: extendParams!'',	// 提交的上传扩展参数,例如:n1:'v1',n2:'v2',后台接受:fileEntity.getFileUploadParams().getExtend() v4.1.3
	
	isLazy: @ObjectUtils.toBoolean(isLazy!false),				// 设置为ture需要点击上传按钮才上传文件,否则选择后就直接上传
	
	isMini: @ObjectUtils.toBoolean(isMini!false),				// 是否是精简上传窗口,无边距,无边框
	
	preview: preview!'',										// 是否显示预览按钮,接受参数:weboffice
	
};

此处组件属性注意bizKey、bizType、maxUploadNum,前两项关系到上传图片后数据库保存的路径和之后回显,后一项表示允许上传的最大数量。

下面用一个实例来说明具体实现方法:
form表单页面:
form表单
注意bizKey为业务表主键,bizType为业务表图片相关字段。
controller层的save方法中添加:
controller层
此处注意saveFileUpload及findFileUpload方法的两个参数,第一项为业务表主键,第二项为为业务表图片相关字段,保持与上面form表单中对应两项一致,否则在保存的时候,数据库中biz_key和biz_type将存不进值。

如需在list表格页面中回显,需要编写函数访问url地址。

参考资料:

https://blog.csdn.net/qq_37725560/article/details/90638999