需求：使用wangEditor進行圖片上傳，上傳的圖片存儲在磁盤中（並非Tomcat項目目錄中），上傳成功后wangEditor會進行回顯，然后可以通過URL來對上傳完成的圖片進行引用。
Tomcat虛擬路徑配置
為了讓上傳的圖片放在Tomcat外，不會在項目重新部署的時候被清空，我們需要先配置一下Tomcat的虛擬路徑。
配置好虛擬路徑之后，我們將上傳的圖片存到此路徑下面，就能通過URL訪問到我們的圖片了。
Tomcat版本：8.5.3
端口：9090
①打開Tomcat根目錄下的/conf/server.xml
②找到Host節點，添加<Context path="/image" docBase="D:\image" reloadable="true" />
注：docBase 就是你要配置的圖片存放的真實路徑，我這里放在D:\image文件夾下面；
path是虛擬路徑，就是你在項目中訪問圖片的時候所需要的路徑，比如我在D:\image文件夾下面有一張圖片，名字為 001.png。這時候我在項目里面訪問這張圖片的URL就是：http://localhost:9090/image/001.png
reloadable為true，代表熱部署，就是你上傳圖片后，不需要重新啟動Tomcat,它會自動加載新上傳的圖片。
1 <Host name="localhost" appBase="webapps" 2 unpackWARs="true" autoDeploy="true"> 3 4 <!-- SingleSignOn valve, share authentication between web applications 5 Documentation at: /docs/config/valve.html --> 6 <!-- 7 <Valve className="org.apache.catalina.authenticator.SingleSignOn" /> 8 --> 9 10 <!-- Access log processes all example. 11 Documentation at: /docs/config/valve.html 12 Note: The pattern used is equivalent to using pattern="common" --> 13 <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" 14 prefix="localhost_access_log" suffix=".txt" 15 pattern="%h %l %u %t "%r" %s %b" /> 16 <Context path="/image" docBase="D:\image" reloadable="true" /> 17 </Host>
配置好之后，我們在D:\image目錄下放一張圖片001.png（直接拷貝進去就行了
然后啟動Tomcat服務器，輸入URL：http://localhost:9090/image/001.png,就能訪問到了。
注意事項：
在IDEA中，你在項目中使用Tomcat的時候，需要將Deploy applications configured in Tomcat instance這個選項勾選，這樣我們上面的配置才會生效。其他編譯器應該也會有類似的操作，就不再講述。
接下來，就使用SpringMVC和wangEditor進行圖片上傳操作：
首先，引入所需的Jar包:
其中幾個Jar包需要注意：
①增加對文件上傳的支持：commons-fileupload 這個包還有其依賴包commons-io
②處理JSON數據所需要的Jar包，主要是為了SpringMVC返回數據的時候將數據轉為JSON對象：com.fasterxml.jackson.core ，引入這一個依賴，其他兩個jar包（com.fasterxml.jackson.annotations和com.fasterxml.jackson.databind）會自動導入。這里要注意Spring的版本和JSON的版本不要差太多，不然可能會出一些奇怪的問題，我這里Spring版本為4.3.16，JSON的版本為2.9.2。
③創建JSON對象所需的Jar包,主要是為了在Java中構造JSON對象返回給wangEditor: org.json
1 <properties> 2 <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> 3 <maven.compiler.source>1.7</maven.compiler.source> 4 <maven.compiler.target>1.7</maven.compiler.target> 5 <spring.version>4.3.16.RELEASE</spring.version> 6 </properties> 7 8 <dependencies> 9 <dependency> 10 <groupId>junit</groupId> 11 <artifactId>junit</artifactId> 12 <version>4.11</version> 13 <scope>test</scope> 14 </dependency> 15 <!--spring依賴--> 16 <dependency> 17 <groupId>org.springframework</groupId> 18 <artifactId>spring-context</artifactId> 19 <version>${spring.version}</version> 20 </dependency> 21 <dependency> 22 <groupId>org.springframework</groupId> 23 <artifactId>spring-web</artifactId> 24 <version>${spring.version}</version> 25 </dependency> 26 <dependency> 27 <groupId>org.springframework</groupId> 28 <artifactId>spring-webmvc</artifactId> 29 <version>${spring.version}</version> 30 </dependency> 31 <dependency> 32 <groupId>org.springframework</groupId> 33 <artifactId>spring-beans</artifactId> 34 <version>${spring.version}</version> 35 </dependency> 36 <dependency> 37 <groupId>org.springframework</groupId> 38 <artifactId>spring-jdbc</artifactId> 39 <version>${spring.version}</version> 40 </dependency> 41 42 <dependency> 43 <groupId>commons-logging</groupId> 44 <artifactId>commons-logging</artifactId> 45 <version>1.2</version> 46 </dependency> 47 48 <!--可能會用到Servlet的原生API--> 49 <dependency> 50 <groupId>javax.servlet</groupId> 51 <artifactId>javax.servlet-api</artifactId> 52 <version>3.1.0</version> 53 <scope>provided</scope> 54 </dependency> 55 <!--Jsp頁面中需要使用的JSTL庫,以及其依賴--> 56 <dependency> 57 <groupId>javax.servlet</groupId> 58 <artifactId>jstl</artifactId> 59 <version>1.2</version> 60 </dependency> 61 62 <dependency> 63 <groupId>taglibs</groupId> 64 <artifactId>standard</artifactId> 65 <version>1.1.2</version> 66 </dependency> 67 68 <!--文件上傳--> 69 <dependency> 70 <groupId>commons-fileupload</groupId> 71 <artifactId>commons-fileupload</artifactId> 72 <version>1.3.1</version> 73 </dependency> 74 <dependency> 75 <groupId>commons-io</groupId> 76 <artifactId>commons-io</artifactId> 77 <version>2.4</version> 78 </dependency> 79 <!--JSON依賴相關--> 80 <dependency> 81 <groupId>com.fasterxml.jackson.core</groupId> 82 <artifactId>jackson-databind</artifactId> 83 <version>2.9.2</version> 84 </dependency> 85 <dependency> 86 <groupId>org.json</groupId> 87 <artifactId>json</artifactId> 88 <version>20160810</version> 89 </dependency> 90 91 </dependencies>
配置SpringMVC，Spring，web.xml
SpringMVC的配置：
①Spring的配置：application-context.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!-- 配置掃描器，使注解起作用 --> <context:component-scan base-package="com.bbs"/> </beans>
②SpringMVC 的配置：springmvc-servlet.xml
這里需要注意的是：<mvc:annotation-driven/> 這一個配置：沒有這個的話wangEditor會在瀏覽器的控制台報406，從而接收不到圖片的URL，導致圖片回顯失敗。
<mvc:annotation-driven>會自動注冊RequestMappingHandlerMapping與RequestMappingHandlerAdapter兩個Bean,這是Spring MVC為@Controller分發請求所必需的，並且提供了數據綁定支持，@NumberFormatannotation支持，@DateTimeFormat支持,@Valid支持讀寫XML的支持（JAXB）和讀寫JSON的支持（默認Jackson）等功能。------博客地址：詳細解釋
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd "> <context:component-scan base-package="com.bbs"/>
<!--配置默認servlet，處理靜態資源-->
<mvc:default-servlet-handler/> <mvc:annotation-driven/> <!-- 視圖解析器 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/views/"/> <property name="suffix" value=".jsp"/> </bean>
</beans>
web.xml配置(重要)：
加粗部分是對文件上傳的支持，如果沒有就會拋：
java.lang.IllegalStateException: Unable to process parts as no multi-part configuration has been provided
異常，會導致文件上傳失敗
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/*.xml</param-value> </context-param> <!--配置統一編碼--> <filter> <filter-name>EncodingFilter</filter-name> <filter-class> org.springframework.web.filter.CharacterEncodingFilter </filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>EncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- 對靜態資源的配置 --> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.js</url-pattern> <url-pattern>*.css</url-pattern> <url-pattern>*.png</url-pattern> <url-pattern>*.jpg</url-pattern> <url-pattern>*.ico</url-pattern> <url-pattern>/img/*</url-pattern> <url-pattern>/image/*</url-pattern> <url-pattern>/fonts/*</url-pattern> <url-pattern>/font/*</url-pattern> </servlet-mapping> <!--SpringMVC的攔截器--> <servlet> <servlet-name>springDispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/*.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> <!--文件上傳配置--> <multipart-config> <location>/</location> <max-file-size>2097152</max-file-size> <max-request-size>4194304</max-request-size> </multipart-config></servlet><!-- 匹配所有URL --><servlet-mapping><servlet-name>springDispatcherServlet</servlet-name><url-pattern>/</url-pattern></servlet-mapping></web-app>
在准備完環境之后，就開始使用wangEditor。
在SpringMVC中寫好接收上傳圖片的代碼：
在這之前，需要了解一下對於服務器端返回的JSON對象的格式，wangEditor使用手冊有詳細的解釋
只有按照這個格式返回JSON數據，富文本編輯器才能夠接收到圖片的引用url，才能進行回顯。
{ // errno 即錯誤代碼，0 表示沒有錯誤。 // 如果有錯誤，errno != 0，可通過下文中的監聽函數 fail 拿到該錯誤碼進行自定義處理 "errno": 0, // data 是一個數組，返回若干圖片的線上地址 "data": [ "圖片1地址", "圖片2地址", "……" ] }
1 package com.bbs.web; 2 3 import org.json.JSONArray; 4 import org.json.JSONObject; 5 import org.springframework.stereotype.Component; 6 import org.springframework.stereotype.Controller; 7 import org.springframework.web.bind.annotation.RequestMapping; 8 import org.springframework.web.bind.annotation.RequestMethod; 9 import org.springframework.web.bind.annotation.RequestParam; 10 import org.springframework.web.bind.annotation.ResponseBody; 11 import org.springframework.web.multipart.MultipartFile; 12 13 import javax.servlet.http.HttpServletRequest; 14 import java.io.BufferedOutputStream; 15 import java.io.File; 16 import java.io.FileOutputStream; 17 import java.io.IOException; 18 import java.util.HashMap; 19 import java.util.Map; 20 21 @Controller 22 @Component 23 public class FileUpload { 24 @RequestMapping(value = "upload",method = RequestMethod.POST) 25 public @ResponseBody 26 String uploads(HttpServletRequest request, @RequestParam("myFileName")MultipartFile file){ 27 String url = null; 28 byte[] bytes = null; 29 String uploadDir = "D:\\image\\"; 30 String fileName = file.getOriginalFilename();//得到上傳的文件名 31 String filePath = uploadDir+fileName; 32 BufferedOutputStream bos = null; 33 FileOutputStream fos = null; 34 35 System.out.println(filePath); 36 try { 37 bytes = file.getBytes(); 38 File temp = new File(filePath); 39 if(!temp.exists()){ 40 temp.createNewFile(); 41 } 42 System.out.println(temp.getAbsolutePath()); 43 fos = new FileOutputStream(temp); 44 bos = new BufferedOutputStream(fos); 45 bos.write(bytes); 46 47 }catch (Exception e){ 48 e.printStackTrace(); 49 }finally { 50 if(bos!=null){ 51 try { 52 bos.close(); 53 }catch (IOException e){ 54 e.printStackTrace(); 55 }finally { 56 if (fos!=null){ 57 try { 58 fos.close(); 59 }catch (IOException e){ 60 e.printStackTrace(); 61 } 62 } 63 } 64 } 65 } 66 System.out.println(request.getContextPath()+fileName); 67 //根據wangEditor的服務端接口，造一個JSON對象返回 68 JSONObject json = new JSONObject(); 69 JSONArray array = new JSONArray(); 70 array.put("/image/"+fileName);//將圖片的引用url放入JSON返回給富文本編輯器進行回顯 71 json.put("errno",0); 72 json.put("data",array); 73 return json.toString(); 74 } 75 }
然后寫一下前端頁面：
需要准備wangEditor.min.js 這個文件，並引入到你的頁面中，
點擊 https://github.com/wangfupeng1988/wangEditor/releases 下載最新版。
進入release文件夾下找到wangEditor.js或者wangEditor.min.js即可
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>論壇首頁</title> <script type="text/javascript" src="js/wangEditor.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <link rel="stylesheet" href="css/wangEditor.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div id="editor"> </div> <form action="postData" method="POST" id="data-form"> <input name="data" class="hidden" id="s-editor"/> </form> <button class="btn btn-default" id="submit">提交</button> </body> <script type="text/javascript" src="js/editor.js"></script> </html>
editor.js:
這個配置一定要有，我們在后台接收的時候是根據這個
editor.customConfig.uploadFileName = 'myFileName';//可以隨意起，但是一定要和SpringMVC的RequestParam一致
editor.customConfig.uploadImgServer = '/BBS/upload';//這里填你上傳文件的請求URL
1 $(function () { 2 var E = window.wangEditor; 3 var editor = new E('#editor'); 4 // 自定義菜單配置 5 editor.customConfig.menus = [ 6 'underline', 7 'link', 8 'image', 9 'emoticon', 10 'code', 11 'undo', 12 'redo' 13 ]; 14 // 下面兩個配置，使用其中一個即可顯示“上傳圖片”的tab。但是兩者不要同時使用！！！ 15 //editor.customConfig.uploadImgShowBase64 = true ; // 使用 base64 保存圖片 16 editor.customConfig.uploadImgServer = '/BBS/upload'; 17 editor.customConfig.debug=true; 18 editor.customConfig.uploadFileName = 'myFileName'; 19 editor.customConfig.uploadImgHooks = { 20 success: function (xhr, editor, result) { 21 // 圖片上傳並返回結果，圖片插入成功之后觸發 22 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果 23 console.log(result); 24 } 25 }; 26 editor.create(); 27 28 $('#submit').click(function(){ 29 var content = editor.txt.html(); 30 $('#s-editor').val(content); 31 $('#data-form').submit(); 32 }); 33 });
測試結果：index.html：
選擇圖片進行上傳：
可以查看一下這張圖片的引用：
而在D:\image目錄下，存在這張圖片：
wangEditor的使用手冊：使用手冊
花了大概兩天的時間，踩了好多坑 _(:з」∠)_。
認真閱讀官方文檔還是很重要的。
回到
頂部
頂部