http://blog.csdn.net/yerenyuan_pku/article/details/72808000
上文我們使用FastDFS-Client進行了簡單的文件上傳操作測試，淘淘商城項目中添加商品時上傳圖片的功能還沒實現，如下圖所示。本文將花大量筆墨來教大家如何實現圖片上傳這個功能。 
我們來看下item-add.jsp頁面，可以看到上傳圖片觸發的方法是通過叫做picFileUpload的class來處理的，在<a>標簽的下方是一個隱藏域，是用來接收圖片上傳到圖片服務器的回顯地址的，當我們提交表單的時候，可以把這些圖片地址保存到數據庫中。 
圖片上傳的流程是這樣的，item-add.jsp頁面加載完之后，會自動調用TAOTAO.init進行初始化，如下圖所示。 
TAOTAO是在common.js文件中定義的，我們來看下common.js，可以看到TAOTAO=TT都是在這里定義的，在init方法中this.initPicUpload(data);是用來初始化上傳組件的。初始化上傳組件中就有我們在item-add.jsp頁面中定義的叫做picFileUpload的class，由於上傳操作可能不只一個地方調用，因此$(".picFileUpload").each(function(i,e){用來對所有調用上傳組件的頁面進行初始化。如果已經上傳過圖片，現在處於編輯狀態的話，那么就使用_ele.siblings(".pics").find("ul").append("...")來加載原來已經添加過的圖片。點擊上傳圖片按鈕后，就會加載富文本編輯的上傳圖片界面，富文本編輯器的參數是在上面var TT = TAOTAO = {的下面，指定了上傳文件參數的名稱，請求的url是/pic/upload，上傳類型是image、flash、media、file四種。 
下面我們來實現圖片上傳這個功能。
實現圖片上傳功能
導包
上傳圖片需要依賴commons-io和commons-fileupload開發包，我們需要在taotao-manger-web工程的Maven依賴中查看一下是否有這兩個jar包，目前是有commons-io-1.3.2.jar這個jar包的(它是在taotao-common工程的Maven依賴中，而taotao-manager-web依賴了taotao-common，因此它也有了這個jar包)，但目前沒有commons-fileupload，因此我們需要在taotao-manager-web工程的pom.xml文件中添加對commons-fileupload的依賴。 
添加的依賴如下，由於在taotao-parent工程當中統一定義了版本號，因此這里不用指定版本號。
<!-- 文件上傳組件 --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> </dependency>配置文件上傳解析器
我們需要在taotao-manager-web工程的springmvc.xml文件當中配置一下文件上傳解析器，如下圖所示。 
為方便大家復制，現把文件上傳解析器的配置貼出：
<!-- 定義文件上傳解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 設定默認編碼 --> <property name="defaultEncoding" value="UTF-8"></property> <!-- 設定文件上傳的最大值5MB，5*1024*1024 --> <property name="maxUploadSize" value="5242880"></property> </bean>- 1
配置訪問圖片前綴
我們在訪問圖片時是以http的方式訪問的，例如http://192.168.25.133/group1/M00/00/00/wKicDVjxPn2AOBiGAAHk-VzqZ6w952.jpg，從上文中我們知道圖片服務器返回的圖片路徑是group1/M00/00/00/wKicDVjxPn2AOBiGAAHk-VzqZ6w952.jpg，也就是說沒有前面那部分路徑，即http://192.168.25.133/，而我們又不能在代碼中寫死前綴，因為IP及端口號都有可能更改，因此最好是放到配置文件當中，我們在src/main/resources/resource目錄下新建一個resource.properties文件，配置文件中輸入IMAGE_SERVER_URL=http://192.168.25.133/，這說明圖片服務器中的nginx配置的訪問端口是默認的80端口，如下圖所示。 
加載配置文件
我們在上面新建了resource.properties文件之后，在Spring容器中我們就需要加載該配置文件了，因此我們在springmvc.xml配置文件中加入如下配置：
<context:property-placeholder location="classpath:resource/resource.properties" />
如下圖所示： 
如此一來，springmvc.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:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xmlns:dubbo="http://code.alibabatech.com/schema/dubbo" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd"> <!-- 加載屬性文件 --> <context:property-placeholder location="classpath:resource/resource.properties" /> <context:component-scan base-package="com.taotao.controller" /> <mvc:annotation-driven /> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/" /> <property name="suffix" value=".jsp" /> </bean> <!-- 靜態資源映射 --> <mvc:resources location="/WEB-INF/js/" mapping="/js/**"/> <mvc:resources location="/WEB-INF/css/" mapping="/css/**"/> <!-- 定義文件上傳解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 設定默認編碼 --> <property name="defaultEncoding" value="UTF-8"></property> <!-- 設定文件上傳的最大值5MB，5*1024*1024 --> <property name="maxUploadSize" value="5242880"></property> </bean> <!-- 引用dubbo服務 --> <dubbo:application name="taotao-manager-web"/> <dubbo:registry protocol="zookeeper" address="192.168.25.128:2181"/> <dubbo:reference interface="com.taotao.service.ItemService" id="itemService" /> <dubbo:reference interface="com.taotao.service.ItemCatService" id="itemCatService" /> </beans>
創建Controller
我們需要新建一個PictureController類來處理圖片上傳操作，如下圖所示。 
上圖中@Value("${IMAGE_SERVER_URL}")是為了注入我們在配置文件resource.properties中配置的圖片訪問前綴。@RequestMapping("/pic/upload")指定上傳文件(圖片)請求的url，與下圖指定的url一樣，上圖uploadPic方法中的形參——uploadFile與下圖的上傳文件的參數名稱是要一樣的。 
那么方法uploadPic應該返回什么樣的格式呢，我們可以從kindeditor官網查看一下，如下圖所示，可以看到返回值格式是json串，那么我們便有三種實現方式。第一種是直接返回Map格式的數據，json和Map數據都是key和value的形式，因此返回Map是沒問題的。第二種是創建一個pojo類，該類有三個屬性，分別是error、url、message，然后將該類轉換為json之后返回。第三種是將Map轉變為json字符串返回。這里我們暫且使用第一種方式。 
為了方便大家復制，現把PictureController類的代碼粘貼如下：
/** * 圖片上傳Controller * <p>Title: PictureController</p> * <p>Description: </p> * <p>Company: www.itcast.cn</p> * @version 1.0 */ @Controller public class PictureController { @Value("${IMAGE_SERVER_URL}") private String IMAGE_SERVER_URL; @RequestMapping("/pic/upload") @ResponseBody public Map uploadPic(MultipartFile uploadFile) { try { // 首先接收頁面上傳的文件 byte[] content = uploadFile.getBytes(); // 取出文件的擴展名 String originalFilename = uploadFile.getOriginalFilename(); String ext = originalFilename.substring(originalFilename.lastIndexOf(".") + 1); // 把這個文件內容上傳到圖片服務器 FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/fast_dfs.conf"); String url = fastDFSClient.uploadFile(content, ext); // 從配置文件中取圖片服務器的url // 創建返回結果對象 Map result = new HashMap(); result.put("error", 0); result.put("url", IMAGE_SERVER_URL + url); // 返回結果 return result; } catch (Exception e) { e.printStackTrace(); Map result = new HashMap(); result.put("error", 1); result.put("message", "圖片上傳失敗"); return result; } } }- 1
測試圖片上傳功能
上面我們都配置完后，現在我們就來試試圖片上傳功能，如下圖所示，發現點擊”開始上傳”之后圖片正常回顯了。 
接着我們點擊”全部插入”按鈕，可以看到在”上傳圖片”按鈕的下方有我們剛才上傳的四張圖片，我們是可以點擊任何一張圖片在瀏覽器中瀏覽的，比如我們點擊第三張圖片——a.jpg。 
在瀏覽器中訪問的效果如下圖所示。這樣我們的圖片上傳功能便實現了。 