首页 > 代码库 > SSM配置Ueditor实现图片的上传<一>

SSM配置Ueditor实现图片的上传<一>

2024-09-22 05:08:00   216人阅读

最近想学点新的东西，于是琢磨着用SSM整合Ueditor来实现图片的上传！至于为什么选Ueditor，道理你懂得啦！百度开发的而且开源，能自定义自己想要的内容，版本更新什么的也比较勤快！接下来我准备记录下探索的过程！

1.下载

技术分享

点击跳转到Ueditor下载界面

你可以到上面的地址下载Ueditor插件，选择UTF-8编码的Jsp版本。

2.构建工程

新建一个Maven工程，首先把ssm框架的基本的东西搭建好，如果你不清楚ssm基本框架，我博客里面有详细的搭建过程可以参考！在这我就直接上图了！

技术分享

3.初始化编辑器

我在进行这一步的时候遇到了很多问题，希望你仔细看，避免走太多弯路！

下面是我的index.jsp页面的代码，js的引入顺序是有要求的要不然会报错！

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<% String rootPath = request.getContextPath(); %>
<head>
<title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src=http://www.mamicode.com/"ueditor/ueditor.config.js"></script>>这里就完成Ueditor的初始化创建了，但是在你的页面中却始终无法出现富文本编辑器的编辑框，这是为什么呢？
是这样的，假如你在web.xml配置的拦截内容如下
<servlet-mapping>  
        <servlet-name>SpringMVCDemo</servlet-name>  
        <url-pattern>/</url-pattern>  
</servlet-mapping>  
那么springmvc的前端控制器会对所有的请求进行拦截辨认，静态资源也不例外，所以index.jsp页面是加载不到你需要的那些js文件以及图片等静态资源的！所以你得告诉springmvc，让前端控制器放行静态资源，你得在springmvc.xml中加入如下配置
<!--静态资源拦截问题  -->
    <mvc:resources location="/ueditor/" mapping="/ueditor/**"/>
不出意外的话，现在你已经能在index.jsp页面上看到富文本编辑器了，但是此时的上传图片功能还是无法使用，你还得进行如下的配置！
4.实现图片上传功能
在这我也就不一步一步跟着源码来介绍业务逻辑的实现过程了，如果你希望详细了解的话，去下面这个大牛的博客看看详细实现过程！直接上代码，找到config.json文件
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "http://localhost:8080/SpringMVCDemo", /* 图片访问路径前缀 */
    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", 
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
修改imageUrlPrefix，把他改成你请求你工程的url！

5.截图

技术分享
你可以在如下的目录中找到上传的图片：
技术分享
可是这样真的就够了么？显然，在实际的开发过程中，我们是要将图片的信息存到数据库进行管理的，因此这样的实现远远不够，由于篇幅原因请看下一篇！


SSM配置Ueditor实现图片的上传<一>


联系
我们