Jeesite4 local and server upload files and pictures in detail

Happy Chinese New Year everyone. Your old friend Xiao Q is back. Recently, he has been busy with company project development and Chinese New Year is busy, so he didn’t have time to update the content. Are you a little anxious? The company is using jeesite4 to develop projects recently. I am not familiar with this framework at all, and I always check and use it when I encounter problems. No, it got stuck directly when uploading files and uploading pictures. Baidu googled for a long time but failed to find a solution. After consulting the developer Mr. ThinkGem, I finally found a solution. So, in order to avoid detours for comrades who use jeesite4 in the future, I will briefly summarize my road to mining pits for you, hoping to help you.

First of all, let me introduce to you the component properties provided by jeesite4 for local upload files and pictures:

fileupload file upload:

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"/>

Component properties:

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
	
};

As for the properties above, let me first introduce a few special ones I used. If you want to get the path of the uploaded file, you must set the value of filePathInputId, that is, the id of the input box where the file URL is stored as upload (custom), and then set The returnPath attribute is set to true, so that the file URL is returned to the input box with the id upload. The same is true for fileNameInputId.

Then I will introduce to you the steps and methods of uploading files to the server in jeesite4:

1. To create a tool class that inherits the FileUploadServiceExtendSupport class, add the @Service annotation, and rewrite the uploadFile(FileEntity fileEntity) and getFileUrl(FileUpload fileUpload) methods inside.

2. The FileEntity class in the uploadFile(FileEntity fileEntity) method is a comparison class for uploading files or pictures, through

String path = fileEntity.getFileRealPath();
File file=new File(path);

Get the file object of the uploaded file, and then complete the logic of your own upload server.

3. The getFileUrl(FileUpload fileUpload) method is to obtain the server path returned after the upload file is successfully uploaded. In this method, write the logic for you to get the server path.

4. Pay special attention to the bizKey and bizType attributes. If these two attributes are not removed, the data in the file table will be read, and if they are removed, the hidden field data you specify will be read. I didn't understand this thoroughly before, which caused problems with the image data echo.

Well, that’s all for today. If you want to know more learning knowledge, please follow the WeChat official account “Ah Q Shuo” to get more learning materials! You can also leave a message in the background to express your doubts, and Ah Q will answer you in a later article. Learn a little bit every day and improve a little bit every day.