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层就不写了