Ueditor整合Spring Boot涂鸦上传总结

你的名字 2021-09-19 19:32 377阅读 0赞

### Ueditor整合Spring Boot涂鸦上传总结 ###

*  简介
 *   *  说明
     *  整合Spring Boot 的Maven支持
     *  源码config.json配置项设置
     *  源码controller.json中的添加
     *  Base64的公共类
     *  java代码支持
     *  前端页面处理
     *  成果展示

# 简介 #

Ueditor官方的定义是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。而我通过自己的适用，感觉其功能强大，涵盖面广，富文本编辑简单易上手。
    		今天我在这里主要是针对Ueditor的涂鸦图片上传做个总结。不足之处，希望大家多多补充。

## 说明 ##

Ueditor 所提供给我们的涂鸦图片上传与提供给我们的图片上传和文件上传的不同之处就在于涂鸦上传是以Base64的编码格式首先将图片转换成base64的字符串来进行上传的，在源码“/ueditor/dialogs/scrawl/scrawl.js”中的最后面我们可以观察到。另外需要注意一点的是在源码的config.json中涂鸦上传配置项的设置。

## 整合Spring Boot 的Maven支持 ##

<dependency>
    			<groupId>commons-codec</groupId>
    			<artifactId>commons-codec</artifactId>
    </dependency>

## 源码config.json配置项设置 ##

/* 涂鸦图片上传配置项 */
        "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
        "scrawlFieldName": "scwalfile", /* 提交的图片表单名称 */
        "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
        "scrawlMaxSize": 2048000, /* 上传大小限制，单位B */
        "scrawlUrlPrefix": "", /* 图片访问路径前缀 */
        "scrawlInsertAlign": "none",

## 源码controller.json中的添加 ##

<%
    
        request.setCharacterEncoding( "utf-8" );
    	response.setHeader("Content-Type" , "text/html");
    	
    	String rootPath = application.getRealPath( "/" );
    	
    	String action = request.getParameter("action");  
        String result = new ActionEnter( request, rootPath ).exec();  
        if( action!=null && (action.equals("listfile") || action.equals("listimage") ) ){  
            rootPath = rootPath.replace("\\", "/");  
            result = result.replaceAll(rootPath, "/");//把返回路径中的物理路径替换为 '/'  
        }  
        out.write( result );
    
    %>
    其中action.equals("listfile") || action.equals("listimage")中的listfile和listimage是和config.json中的scrawlActionName相对应的。

## Base64的公共类 ##

package cn.gson.crm.common;
    
    import java.io.FileInputStream;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.OutputStream;
    
    import sun.misc.BASE64Decoder;
    import sun.misc.BASE64Encoder;  
    public class Base64Utils   
    {  
        //图片转化成base64字符串  
        public static String getImageStr(String path)  
        {
        	//将图片文件转化为字节数组字符串，并对其进行Base64编码处理  
            InputStream in = null;  
            byte[] data = null;  
            //读取图片字节数组  
            try   
            {  
                in = new FileInputStream(path);          
                data = new byte[in.available()];  
                in.read(data);  
                in.close();  
            }   
            catch (IOException e)   
            {  
                e.printStackTrace();  
            }  
            //对字节数组Base64编码  
            BASE64Encoder encoder = new BASE64Encoder();  
            return encoder.encode(data);//返回Base64编码过的字节数组字符串  
        }  
          
        //base64字符串转化成图片  
        public static boolean generateImage(String imgStr, String path)  
        {   //对字节数组字符串进行Base64解码并生成图片  
            if (imgStr == null) //图像数据为空  
                return false;  
            BASE64Decoder decoder = new BASE64Decoder();  
            try   
            {  
                //Base64解码  
                byte[] b = decoder.decodeBuffer(imgStr);  
                for(int i=0;i<b.length;++i)  
                {  
                    if(b[i]<0)  
                    {//调整异常数据  
                        b[i]+=256;  
                    }  
                }  
                //生成jpeg图片  
                //String imgFilePath = "D:\\tupian\\new.jpg";//新生成的图片  
                OutputStream out = new FileOutputStream(path);      
                out.write(b);  
                out.flush();  
                out.close();  
                return true;  
            }   
            catch (Exception e)   
            {  
                return false;  
            }  
        }  
    }

## java代码支持 ##

//涂鸦上传
            if("uploadscrawl".equals(action))
        	{
        	Member member = (Member)session.getAttribute(Constants.SESSION_MEMBER_KEY);
            Map<String, Object> result = new HashMap<String, Object>();
            	try {
                    String fileName = UUIDUtil.creatUUID()  + ".png";
                    File rfile = ResourceUtils.getFile("classpath:static");
                    //绝对路径
                    String lastPath = rfile.getAbsolutePath() + "\\images\\attachment\\" + fileName;
                    Base64Utils.generateImage(scwalfile, lastPath);
                    //相对路径用于显示图片
                    String filePath = "\\images\\attachment\\" + fileName;
                    result.put("state", "SUCCESS");
                    result.put("url", filePath);
                    //将文件存储到数据库中
                    Attachment att= new Attachment();
                    att.setContentType("涂鸦");
                    att.setFilePath(filePath);
                    att.setUploadTime(new Date());
                    att.setMember(member);
                    att.setOriginalName(fileName);
                    attachmentDao.save(att);
                } catch (Exception e) {
                    result.put("state", "FAILED");
                }
        	}
            return result;
            在上传存库的时候需要有自己的实体，还有就是当你不知道前台需要啥的时候，你可以查看源码的scrawl.js看起ajax的返回类型，需要啥就补充啥；前提条件：result.put("state", "SUCCESS");

## 前端页面处理 ##

所需jar包
    		<script type="text/javascript" charset="utf-8" src=" /UEditor_jsp/ueditor.config.js"></script>
    		<script type="text/javascript" charset="utf-8" src=" /UEditor_jsp/ueditor.all.js"> </script>
    		<script type="text/javascript" charset="utf-8" src=" /UEditor_jsp/lang/zh-cn/zh-cn.js"></script>
    代码支持
    	<div class="field" padding="5px" margin="5px">
        		<script id="content" type="text/plain"  style="width:100%;height:490px;"></script>
        </div>

## 成果展示 ##

图片:![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDE5MTA1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDE5MTA1_size_16_color_FFFFFF_t_70]: /images/20210901/9c8923b40e0447a0af6e203263ef6639.png