jeesite4中图片上传功能


一般情况下的图片上传

1.添加图片上传标签

页面上标签的使用

<div class="row">
	<div class="col-xs-12">
		<div class="form-group">
			<label class="control-label col-sm-2">
				<span class="required hide">*</span> ${
          
   text(图片上传)}:</label>
			<div class="col-sm-10">
				<#form:fileupload id="uploadImage" bizKey="${cmsSite.id}" bizType="cmsSite_image"
					uploadType="image" class="" readonly="false" preview="true"/>
			</div>
		</div>
	</div>
</div>

2.修改service中的save方法

在save方法中添加如下代码,注意saveFileUpload方法中的第二个参数必须与html页面中的bizType的属性值相同

// 保存上传图片
FileUploadUtils.saveFileUpload(cmsSite.getId(), "cmsSite_image");

将图片保存到实体属性中

1.修改图片上传标签,修改后的如下

<#form:fileupload id="uploadImage2"  returnPath="true" filePathInputId="remarks"  			
    bizKey="${cmsSite.id}" bizType="cmsSite_image2"
	uploadType="image" class="" readonly="false" preview="true"/>
	<#form:input path="remarks"  readonly="true"  class="form-control"/>

注意: 1.上面添加了“returnPath”和“filePathInputId”属性 2.filePathInputId属性的值必须与下面form标签中path属性的值相同,且remarks属性是用来存储图片路径

效果

将图片保存到对象的拓展表中

1.代码如下

<div class="row">
	<div class="col-xs-12">
		<div class="form-group">
			<label class="control-label col-sm-2">
			<span class="required hide">*</span> ${
          
   text(图片上传3)}:</label>
				<div class="col-sm-10">
					<#form:fileupload id="uploadImage3"  returnPath="true" 
						filePathInputId="cmsSiteExtends_extend_extendS1"  bizKey="${cmsSite.id}" 
						bizType="cmsSite_image3"
					uploadType="image" class="" readonly="false" preview="true"/>
					<#form:input path="cmsSiteExtends.extend.extendS1"  readonly="true"  
					class="form-control"/>
				</div>
			</div>
			</div>
			</div>

2.注意事项

1.因为用到了拓展表,所以input中的path属性值中需要带有extend,具体见上面代码 2.注意因为这里是新增的一个图片上传控件,所以跟之前一样,也需要在service的save方法中添加一个图片上传的代码

经验分享 程序员 微信小程序 职场和发展