本文將介紹 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 完整的檔案

那幾個 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、這個時候，應該可以看到一個 富文字編輯框了

這個編輯框的高度不知為什麼設定無效，暫時不管了。

三、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 是有要求的,如圖

建立 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，點選下面的 加號 ，新增一條對映

因為我的專案資料夾的對映是 /Blog ，所以這裡前面也加了/Blog，大家可根據自己情況填寫

五、效果如下