springmvc和layui富文本编辑器实时上传图片功能实现

本文将介绍 springmvc 上传功能实现，以及layui 前端插件的使用，尤其是其富文本编辑器的上传图片接口的实现。

一、开发准备

1、layui 官网：/

点击"立即下载"可以获取前端框架，没有使用过的朋友可以自行了解下。

下载好后，引入其核心 js 和 css 文件，可以测试是否按照成功。

2、layui 富文本编辑器文档：/doc/modules/layedit.html

3、几个必备的 依赖jar，用于上传和 json 数据返回

上传必备依赖

<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.2.2</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency>

json 依赖

<dependency><groupId>org.json</groupId><artifactId>json</artifactId><version>0516</version></dependency>

二、layui 代码部署

1、layui 完整的文件

那几个 js 文件 ，只需要引入 layui.all.js 即可，之前要引入 jQuery库

2、引入 核心 css 和 js 文件

css

<linkrel="stylesheet"href="${pageContext.request.contextPath}/plugin/layer/css/layui.css">

js

<scriptsrc="${pageContext.request.contextPath}/js/jquery.min.js"></script><scriptsrc="${pageContext.request.contextPath}/plugin/layer/layui.all.js"></script><script>//JavaScript代码区域layui.use('element',function(){varelement=layui.element;});</script>

3、实现一个编辑器

代码可以从 layui 官网导航上的 "文档"-->"表单"获取

地址：/demo/form.html

我们拷贝一段代码

<formclass="layui-form"method="post"id="myForm"enctype="multipart/form-data"><divclass="layui-form-itemlayui-form-text"><labelclass="layui-form-label">内容</label><divclass="layui-input-block"><textareaclass="layui-textarealayui-hide"name="content"lay-verify="content"id="content"></textarea></div></div></form>

注意：form表单的class需要加上 layui-form

textarea 标签的 name 和 id，要和下面一致

然后在 其后加上 js 文件创建一个 编辑器和让图片按钮能发送数据

<script>layui.use(['form','layedit','laydate'],function(){varform=layui.form,layer=layui.layer,layedit=layui.layedit,laydate=layui.laydate;//上传图片,必须放在创建一个编辑器前面layedit.set({uploadImage:{url:'${pageContext.request.contextPath}/uploadFile'//接口url,type:'post'//默认post}});//创建一个编辑器vareditIndex=layedit.build('content',{height:400});});</script>

注意：上传图片的代码必须放在 创建一个编辑器 前面

具体文档：/doc/modules/layedit.html

4、这个时候，应该可以看到一个 富文本编辑框了

这个编辑框的高度不知为什么设置无效，暂时不管了。

三、springmvc 实现上传功能

1、加入基本的 依赖

前面已经说了，上传需要两个 jar，另外我们需要返回 Json 数据，也需要一个 Json 的jar

2、spirngmvc.xml 配置文件上传

<beanid="multipartResolver"class="org.springframework.monsMultipartResolver"><!--设置上传最大尺寸为5MB--><propertyname="maxUploadSizePerFile"value="5242880"/><propertyname="defaultEncoding"value="UTF-8"/><propertyname="resolveLazily"value="true"/></bean>

如果你发现，无法获得上传的文件，通常是没有添加此处代码

3、新建一个上传文件的控制器

packagecom.liuyanzhao.mon;importorg.apache.ibatis.annotations.Param;importorg.json.JSONObject;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.ResponseBody;importorg.springframework.web.multipart.MultipartFile;importjavax.servlet.http.HttpServletRequest;importjava.io.File;importjava.io.IOException;importjava.text.SimpleDateFormat;importjava.util.Calendar;importjava.util.Date;importjava.util.HashMap;importjava.util.Map;@ControllerpublicclassUploadFileController{//上传文件@ResponseBody@RequestMapping(value="/uploadFile")publicStringuploadFile(HttpServletRequestrequest,@Param("file")MultipartFilefile)throwsIOException{SimpleDateFormatsdf=newSimpleDateFormat("yyyyMMddHHmmssSS");Stringres=sdf.format(newDate());//服务器上使用//StringrootPath=request.getServletContext().getRealPath("/resource/uploads/");//target的目录//本地使用StringrootPath="/Users/liuyanzhao/Documents/uploads/";//原始名称StringoriginalFilename=file.getOriginalFilename();//新的文件名称StringnewFileName=res+originalFilename.substring(originalFilename.lastIndexOf("."));//创建年月文件夹Calendardate=Calendar.getInstance();FiledateDirs=newFile(date.get(Calendar.YEAR)+File.separator+(date.get(Calendar.MONTH)+1));//新文件FilenewFile=newFile(rootPath+File.separator+dateDirs+File.separator+newFileName);//判断目标文件所在的目录是否存在if(!newFile.getParentFile().exists()){//如果目标文件所在的目录不存在，则创建父目录newFile.getParentFile().mkdirs();}System.out.println(newFile);//将内存中的数据写入磁盘file.transferTo(newFile);//完整的urlStringfileUrl="/uploads/"+date.get(Calendar.YEAR)+"/"+(date.get(Calendar.MONTH)+1)+"/"+newFileName;Map<String,Object>map=newHashMap<String,Object>();Map<String,Object>map2=newHashMap<String,Object>();map.put("code",0);//0表示成功，1失败map.put("msg","上传成功");//提示消息map.put("data",map2);map2.put("src",fileUrl);//图片urlmap2.put("title",newFileName);//图片名称，这个会显示在输入框里Stringresult=newJSONObject(map).toString();returnresult;}}

注意：

① 博主这里文件是上传到本地的/Users/liuyanzhao/Documents/uploads/ 目录，大家自行修改。待会儿还要在 Tomcat 或者 IDE 里配置静态资源虚拟映射(即55行的路径，/uploads )，才能在浏览器里访问图片

② 图片上传，以 年/月/文件名 形式储存，其中文件名是按时间自动命名

③ 第 55 行的是图片的 url，/ 表示根目录，会自动加上 域名的，大家可根据自己情况修改

④ 第 59-66 行代码是生产 以 Map 方式 创建JSON，最终返回给 前台

这里的 JSON，layui 是有要求的,如图

创建 JSON 的方法很多，这里不介绍了，记得 JSON 区分大小写，不支持注释 即可

关于 JSON 的大家可以百度或者上慕课网找教程

⑤ 这个方法的路径映射是 /uploadFile 要和 我们上面配置的 接口 url 一致，否则无法上传

四、静态资源虚拟路径配置

这里介绍两种方法。

1、Tomcat 的server.xml 里配置

如果使用IDE如IntellJ IDEA运行Tomcat，无效。如果是部署到服务器上，可以使用

打开 Tomcat 安装目录 下的 conf/server.xml

在 Host 标签里添加一行 context 配置即可，如下

<Hostname="localhost"appBase="webapps"unpackWARs="true"autoDeploy="true"><!--SingleSignOnvalve,shareauthenticationbetweenwebapplicationsDocumentationat:/docs/config/valve.html--><!--<ValveclassName="org.apache.catalina.authenticator.SingleSignOn"/>--><!--Accesslogprocessesallexample.Documentationat:/docs/config/valve.htmlNote:Thepatternusedisequivalenttousingpattern="common"--><ValveclassName="org.apache.catalina.valves.AccessLogValve"directory="logs"prefix="localhost_access_log."suffix=".txt"pattern="%h%l%u%t&quot;%r&quot;%s%b"/><!--增加的静态资源映射配置--><Contextpath="/uploads"docBase="/Users/liuyanzhao/Documents/uploads"reloadable="true"crossContext="true"></Context></Host>

注意：

path 是服务器上的虚拟路径

docBase 是你的本地物理路径

比如，我在本地测试，项目地址(相当于域名)是http://localhost:8090/Blog

我要访问/Users/liuyanzhao/Documents/uploads//9/hello.png 这张图片，在浏览器上只需要输入

http://localhost:8090/Blog/uploads//9/hello.png 就能访问

2、在IDE 里配置

因为我们通常是用 IDE 来运行 Tomcat，似乎这时候 本地Tomcat 安装目录的 配置不生效，暂时不追究

具体方法如下，因为博主用的是 IntelliJ IDEA，这里介绍IDEA 如果配置静态资源映射

（1） 点击右上角的Tomcat 配置

（2）点击 Deployment，点击下面的 加号 ，添加一条映射

因为我的项目文件夹的映射是 /Blog ，所以这里前面也加了/Blog，大家可根据自己情况填写

五、效果如下

本文地址：/6223.html