jeesite图片上传并显示

前几天大哥叫我搞个这的需求出来  上传图片并展示出来 并且后台对图片进行裁剪上传

前端传来的图片是个base64的编码 格式的图片 

点击新增

 点击上传图片

 可进行裁剪 然后上传并且展示出来

 前端form页面附上    记住 path路径一定要对上

<div class="row">
				<div class="col-xs-12">
					<div class="form-group" style="height:350px" data-align="center" >
						<label class="control-label col-sm-2"style="height: 100px" data-align="center" >
							<span class="required hide">*</span> ${text('图片上传')}：</label>
						<div class="col-sm-12" style="height: 350px" data-align="center">
							<img id="avatarImg" class="profile-user-img   img-rounded img-responsive img-thumbnail center-block width-460 " style="height:300px"width="100%\9" align="center"
								 src="${ctxStatic+'/upload.png'}">
							<#form:imageclip name="imageBase64" btnText="上传图片" btnClass="btn-block"
							uploadType="image" class="" readonly="false" preview="true"
							imageId="avatarImg" imageDefaultSrc="${ctxStatic+'/upload.png'}" path="photo"
							circle="false"/>
						</div>
					</div>
				</div>
			</div>

前端list页面：

{header:'${text("产品图片")}', name:'photo', sortable:false, width:83, align:"center", formatter: function(val, obj, row, act){
				return val ? '<img src="'+val+'" height="70" width="70"/>' : '<img src="${ctxStatic+'/upload.png'}" height="70" width="70"/>';
			}},

官方文档太短了

 

 刚开始搞 我直接写在Controller层  大家别学我 

下面是自己测试的 有些小问题 不过问题不大

public String save(@Validated ProductData productData,String photo) {
        //保存到用户字段
  //      User user = UserUtils.getUser();
        // 如果设置了头像，则保存头像
        if (StringUtils.isNotBlank(photo)) {
            if ("EMPTY".equals(photo)) {
                productData.setPhoto(StringUtils.EMPTY); //如果是空的就把这个设置为空值
            } else {  //如果不是空的 否则就把这个图片保存到一个指定的目录下
                //先解码后保存
                //Base64解码
                //写入本地文件
                try {
                    String imageUrl = "avatar/" +UUID.randomUUID().toString()
                            + "." + FileUtils.getFileExtensionByImageBase64(photo);

                    String fileName = Global.getUserfilesBaseDir(imageUrl);
                    FileUtils.writeToFileByImageBase64(fileName, photo);
                    System.out.println("fileName" + fileName);
                    System.out.println("imageUrl:"+imageUrl);
                    logger.info(fileName);
                    //然后在给数据库的字段配置一个图片地址  设置进去
                    productData.setPhoto(Global.USERFILES_BASE_URL + imageUrl);

                } catch (Exception e) {
                    return String.valueOf(false);
                }
            }
            productDataService.save(productData);
        }
        return renderResult(Global.TRUE, text("保存产品数据成功！"));
    }

service层就不写了