SSM博客实战(7)-springmvc和layui富文本编辑器实时上传图片功能实现

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

一、开发准备

1、layui 官网:http://www.layui.com/

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

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

2、layui 富文本编辑器文档:http://www.layui.com/doc/modules/layedit.html

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

上传必备依赖

  1. <dependency>
  2.     <groupId>commons-fileupload</groupId>
  3.     <artifactId>commons-fileupload</artifactId>
  4.     <version>1.2.2</version>
  5.   </dependency>
  6.   <dependency>
  7.     <groupId>commons-io</groupId>
  8.     <artifactId>commons-io</artifactId>
  9.     <version>2.4</version>
  10.   </dependency>

json 依赖

  1. <dependency>
  2.      <groupId>org.json</groupId>
  3.      <artifactId>json</artifactId>
  4.      <version>20170516</version>
  5.    </dependency>

 

二、layui 代码部署

1、layui 完整的文件

SSM博客实战(7)-springmvc和layui富文本编辑器实时上传图片功能实现

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

2、引入 核心 css 和 js 文件

css

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

js

  1. <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  2. <script src="${pageContext.request.contextPath}/plugin/layer/layui.all.js"></script>
  3. <script>
  4.     //JavaScript代码区域
  5.     layui.use('element', function(){
  6.         var element = layui.element;
  7.     });
  8. </script>

 

 

3、实现一个编辑器

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

地址:http://www.layui.com/demo/form.html

我们拷贝一段代码

  1. <form class="layui-form"  method="post" id="myForm" enctype="multipart/form-data">
  2.     <div class="layui-form-item layui-form-text">
  3.         <label class="layui-form-label">内容</label>
  4.         <div class="layui-input-block">
  5.             <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="content"></textarea>
  6.         </div>
  7.     </div>
  8. </form>

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

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

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

  1. <script>
  2.             layui.use(['form', 'layedit', 'laydate'], function() {
  3.              var form = layui.form
  4.                , layer = layui.layer
  5.                , layedit = layui.layedit
  6.                , laydate = layui.laydate;
  7.            //上传图片,必须放在 创建一个编辑器前面
  8.            layedit.set({
  9.                uploadImage: {
  10.                     url: '${pageContext.request.contextPath}/uploadFile' //接口url
  11.                    ,type: 'post' //默认post
  12.                }
  13.            });
  14.            //创建一个编辑器
  15.            var editIndex = layedit.build('content',{
  16.                    height:400
  17.                }
  18.            );
  19.       });
  20. </script>

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

具体文档:http://www.layui.com/doc/modules/layedit.html

 

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

SSM博客实战(7)-springmvc和layui富文本编辑器实时上传图片功能实现

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

 

三、springmvc 实现上传功能

1、加入基本的 依赖

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

 

2、spirngmvc.xml 配置文件上传

  1. <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  2.     <!--设置上传最大尺寸为5MB-->
  3.     <property name="maxUploadSizePerFile" value="5242880"/>
  4.     <property name="defaultEncoding" value="UTF-8"/>
  5.     <property name="resolveLazily" value="true"/>
  6. </bean>

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

 

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

  1. package com.liuyanzhao.blog.controller.common;
  2. import org.apache.ibatis.annotations.Param;
  3. import org.json.JSONObject;
  4. import org.springframework.stereotype.Controller;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  6. import org.springframework.web.bind.annotation.ResponseBody;
  7. import org.springframework.web.multipart.MultipartFile;
  8. import javax.servlet.http.HttpServletRequest;
  9. import java.io.File;
  10. import java.io.IOException;
  11. import java.text.SimpleDateFormat;
  12. import java.util.Calendar;
  13. import java.util.Date;
  14. import java.util.HashMap;
  15. import java.util.Map;
  16. @Controller
  17. public class UploadFileController {
  18.     //上传文件
  19.     @ResponseBody
  20.     @RequestMapping(value = "/uploadFile")
  21.     public String uploadFile(HttpServletRequest request,@Param("file") MultipartFile file) throws IOException {
  22.         SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
  23.         String res = sdf.format(new Date());
  24.         //服务器上使用
  25.        // String rootPath =request.getServletContext().getRealPath("/resource/uploads/");//target的目录
  26.         //本地使用
  27.         String rootPath ="/Users/liuyanzhao/Documents/uploads/";
  28.         //原始名称
  29.         String originalFilename = file.getOriginalFilename();
  30.         //新的文件名称
  31.         String newFileName = res+originalFilename.substring(originalFilename.lastIndexOf("."));
  32.         //创建年月文件夹
  33.         Calendar date = Calendar.getInstance();
  34.         File dateDirs = new File(date.get(Calendar.YEAR)
  35.                 + File.separator + (date.get(Calendar.MONTH)+1));
  36.         //新文件
  37.         File newFile = new File(rootPath+File.separator+dateDirs+File.separator+newFileName);
  38.         //判断目标文件所在的目录是否存在
  39.         if(!newFile.getParentFile().exists()) {
  40.             //如果目标文件所在的目录不存在,则创建父目录
  41.             newFile.getParentFile().mkdirs();
  42.         }
  43.         System.out.println(newFile);
  44.         //将内存中的数据写入磁盘
  45.         file.transferTo(newFile);
  46.         //完整的url
  47.         String fileUrl =  "/uploads/"+date.get(Calendar.YEAR)+ "/"+(date.get(Calendar.MONTH)+1)+ "/"+ newFileName;
  48.         Map<String,Object> map = new HashMap<String,Object>();
  49.         Map<String,Object> map2 = new HashMap<String,Object>();
  50.         map.put("code",0);//0表示成功,1失败
  51.         map.put("msg","上传成功");//提示消息
  52.         map.put("data",map2);
  53.         map2.put("src",fileUrl);//图片url
  54.         map2.put("title",newFileName);//图片名称,这个会显示在输入框里
  55.         String result = new JSONObject(map).toString();
  56.         return result;
  57.     }
  58. }

注意:

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

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

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

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

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

SSM博客实战(7)-springmvc和layui富文本编辑器实时上传图片功能实现

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

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

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

 

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

这里介绍两种方法。

1、Tomcat 的server.xml 里配置

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

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

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

  1. <Host name="localhost"  appBase="webapps"
  2.          unpackWARs="true" autoDeploy="true">
  3.      <!-- SingleSignOn valve, share authentication between web applications
  4.           Documentation at: /docs/config/valve.html -->
  5.      <!--
  6.      <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
  7.      -->
  8.      <!-- Access log processes all example.
  9.           Documentation at: /docs/config/valve.html
  10.           Note: The pattern used is equivalent to using pattern="common" -->
  11.      <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
  12.             prefix="localhost_access_log." suffix=".txt"
  13.             pattern="%h %l %u %t &quot;%r&quot; %s %b" />
  14.              <!-- 增加的静态资源映射配置 -->
  15.     <Context path="/uploads" docBase="/Users/liuyanzhao/Documents/uploads" reloadable="true" crossContext="true"></Context>
  16.    </Host>

注意:

path 是服务器上的虚拟路径

docBase 是你的本地物理路径

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

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

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

 

2、在IDE 里配置

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

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

(1) 点击右上角的Tomcat 配置

(2)点击 Deployment,点击下面的 加号 ,添加一条映射

SSM博客实战(7)-springmvc和layui富文本编辑器实时上传图片功能实现

 

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

 

五、效果如下

SSM博客实战(7)-springmvc和layui富文本编辑器实时上传图片功能实现

 

 

 

 

本文地址:https://liuyanzhao.com/6223.html

  • 微信
  • 赶快加我聊天吧
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
广告也精彩
言曌
广告也精彩

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:3   其中:访客  2   博主  1

    • avatar over

      为什么是target目录

        • avatar 言曌  博主

          @over 最好用物理路径

            • avatar wei

              @言曌 你那个图片是什么获取的