SSM+BJUI实现以Base64方式上传照片

场景

点击添加--选择照片--点击保存--保存到数据库路径--页面展示。

实现

前面实现照片上传可以用其他实现，这里是用BJUI来实现。

需要给后台action传过去base64Str。

添加页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>










 

   
   ">
  
   
  
  
   
    
     
    
    
     
    
    
     
    
     
    
    
     
                   
    
    
     
    
   
  
${title}
消息标题：
      
消息类型：
      
              
                 ${cc.codeName}

                
                 
            
    
发现内容：
                     ${message.content}
              
主题图片：
      
   选择文件
      
      
  


   




    

        

            ×
            

            
                        裁剪图片
            
        
        

            

                未选择图片
            
            

                
            
            

                

                150*150:
                

                
               
            
        
        

            
            
            打开图片
            
            提交
          
        
    


                    
备注： ${message.remark}
 

    

 

  
关闭
  
保存
 

 

实现效果

点击上传照片

裁剪之前

点击保存后提交到后台action

@Description("信息保存")
 @ResponseBody
 @RequestMapping(value = "/doSave")
 public Map doSave(TbMessage entity, String op, String base64Str, String[] itemIdStr) {
  Map jsonResult = null;
  String msg = "";
  try {
   if (base64Str.length()!= 0) {
    String result = ImageUtil.getInstance().baseUploadImg(
      Constants.UPLOAD_IMG_MESSAGE, base64Str);
    entity.setThemeImageUrl((String) result);
   }
   String tabid = tabid(ModelAndViewConstants.MESSAGE_SYS_ID);
   Date now = new Date();
   ShiroUser currentUser = (ShiroUser) SecurityUtils.getSubject().getPrincipal();
   // 添加
   if (null == op || ModelAndViewConstants.OPERATION_VALUE_ADD.equals(op)) {
    entity.setStatus("0");
    entity.setRecordTime(now);
    entity.setUserId(currentUser.getUserId());
    this.service.insert(entity);
   } else {// 编辑
    entity.setModifyDate(now);
    this.service.updateByPrimaryKey(entity);
     DataSourceHolder.setDataSource("demoDs");//切换云端数据源
     this.service.updateByPrimaryKey(entity);
   }
   Integer statusCode = 200;
   String Msg = "消息信息保存成功";
   jsonResult = JsonResult.jsonReturn(statusCode, Msg, tabid);
   return jsonResult;

  } catch (Exception e) {
   msg = "接口调用异常";
   jsonResult = JsonResult.jsonWsReturn(1, msg, e.getMessage());
   LogService.getInstance(this).error("保存消息信息失败" + e.getMessage());
   String mg = "保存消息信息失败：" + e.getMessage();
   jsonResult = JsonResult.jsonReturnErr(mg);
   return jsonResult;
  }

 }

前台控件给后台action传过来base64Str。

工具类ImageUtil

public String baseUploadImg(String dir, String base64) {
  OutputStream out = null;
  String path = null;
  String filePath = null;
  try {
   if ("".equals(base64)) {
    return null;
   }
   base64 = base64.substring(base64.indexOf(",") + 1);
   byte[] b = Base64.decode(base64);
   for (int i = 0; i < b.length; ++i) {
    if (b[i] < 0) {// 调整异常数据
     b[i] += 256;
    }
   }
   String fileName = dir + "_" + new Random().nextInt()
     + DateConvert.formatDateToString(new Date(), DateStyle.YYYYMMDDHHMMSS) + ".png";
   path = dir + File.separator + fileName;
   // 存储路径
   String dirPath = ResourceUtil.getUploadImageRelativeRoot2() + dir;
   filePath = ResourceUtil.getUploadImageRelativeRoot2() + path;
   // 创建新的文件
   boolean resultDir = FileUtil.makedir(dirPath);
   if (resultDir == true) {
    LogService.getInstance(this).debug(filePath);
    File file = new File(filePath);
    out = new FileOutputStream(file);
    out.write(b);
    out.flush();
    out.close();
   } else {
    LogService.getInstance(this).error("建立文件夹" + dir + "失败，完整路径为：dirPath");
   }
  } catch (Exception e) {
   e.printStackTrace();
  }
  return ResourceUtil.getUploadImgRelativeRoot()+path;
 }

在存储路径这个地方又调用ResourceUtil下的getUploadImageRelativeRoot2()

来获取存储图片的相对路径。

public static final String getUploadImageRelativeRoot2() {

     return System.getProperty("catalina.home")+File.separator+"webapps"+File.separator+"img"+File.separator;
   }

jsp页面代码

效果

记得要配置Tomcat下的server.xml路径映射。