ueditor上傳圖片到七牛雲存儲（form api,java）

轉： http://my.oschina.net/duoduo3369/blog/174655

ueditor上傳圖片到七牛雲存儲

• ueditor結合七牛傳圖片
• 七牛的試煉
• 開發前的准備與注意事項說明
• Let's rock
• 與ueditor結合前的准備工作
• 首先從表單開始
• 生成token
• 建立圖片空間
• 生成token
• 上傳流程
• 集成ueditor
• 將ueditor中的圖片模塊的在線管理功能和七牛結合

ueditor上傳圖片到七牛雲存儲

重要說明，本人已不做java多年，請不要加qq再問我java的東東，歡迎提問python。

ueditor結合七牛傳圖片

傳統上，圖片是存在自己的服務器上(圖片->自己服務器)，如果使用了雲存儲之后，有兩種方式存到雲端：

• (圖片->自己服務器->雲存儲)
• (圖片->雲存儲) 明顯第二種節省自己服務器的壓力，結合七牛來說就是使用七牛的form api。

很多開發網絡應用的用戶需要從他們自己的客戶端訪問七牛雲存儲。傳統上，用戶會將數據上傳至他們的業務服務器，然后由業務服務器轉發至雲存儲。這種做法增加了客戶業務服務器的壓力，並且增加了用戶的流量成本。七牛雲存儲允許用戶從客戶端直接上傳數據，而無需到業務服務器中轉。這種模式具有更廣泛的用途和靈活性。

在客戶端直接上傳數據的基礎上，為方便用戶業務服務器和客戶端的信息交互，七牛雲存儲還提供了回調業務服務器的功能。用戶可以在一次數據上傳請求中，完成客戶端和業務服務器的數據交換。在此基礎上，七牛雲存儲還允許用戶利用魔法變量和自定義變量設定回調中所傳遞的數據。

七牛的試煉

這次使用七牛SDK中的一些東西，結合jsp完成ueditor和七牛的結合。 項目放在osc@git上，可以下載源碼對照查看。 http://git.oschina.net/duoduo3_69/QiNiuWithUeditor.git

開發前的准備與注意事項說明

1.請將tomcat中server.xml里面context的path改為"",這樣訪問時你的站點訪問地址為http://你的域名/,(注意沒有工程名字)，例如：

<Context docBase="QiNiu" path="" reloadable="true" source="org.eclipse.jst.jee.server:QiNiu"/></Host> 

2.因為ueditor上傳文件使用的是swfuplod，使用雲存儲回調是flash需要查找你的網站有沒有crossdomain.xml，所以請在WebContent放一個crossdomain.xml，這里提供一個簡單的配置，如果有別的需求可以自行定制。

<?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy> <allow-access-from domain="*" /> <allow-http-request-headers-from domain="*" headers="*" /> </cross-domain-policy> 

Let's rock

與ueditor結合前的准備工作

首先從表單開始

<form method="post" action="http://up.qiniu.com/" enctype="multipart/form-data"> <input name="key" type="hidden" value="<resource key>"> <input name="x:<custom_field_name>" type="hidden" value="<custom value>"> <input name="token" type="hidden" value="<token>"> <input name="file" type="file" /> ... </form> 

這段代碼是七牛api里面給的，結合七牛的文檔可以看出，表單api必須有兩個字段，一個是token，一個是file，file也就是文件，token簡單的說就是七牛驗證你身份的一個加密編碼的串，七牛上傳的圖片的action就是http://up.qiniu.com/。

生成token

token的生成有一套規則，官網api有介紹，結合七牛java的sdk非常簡單就可以搞定。 首先把sdk中需要的東西搞出來，因為不會用到里面所有的類，而且七牛sdk里面分了好多包，自己的項目七牛所有的東西我都扔在com.qiniu下，看着比較順眼。

七牛的sdk 

需要用到的類和依賴的jar包(sdk是maven搞的，會自動下載，拖過來就行)  

ok，找到里面的Config.java

public class Config { public static String USER_AGENT; /** * You can get your accesskey from <a href="https://dev.qiniutek.com" * target="blank"> https://dev.qiniutek.com </a> */ public static String ACCESS_KEY = "<Please apply your access key>"; /** * You can get your accesskey from <a href="https://dev.qiniutek.com" * target="blank"> https://dev.qiniutek.com </a> */ public static String SECRET_KEY = "<Apply your secret key here, and keep it secret!>"; public static String RS_HOST = "http://rs.qbox.me"; public static String UP_HOST = "http://up.qbox.me"; public static String RSF_HOST = "http://rsf.qbox.me"; } 

把ACCESS_KEY，和SECRET_KEY這兩個東西給填上，登錄七牛，不要選擇空間，然后點擊賬號設置就會看到密鑰，粘到這個里面。 

建立圖片空間

下一步在七牛空間里建一個空間，專門來存圖片，請將空間設置為公開空間，根據七牛的規則，公開空間里面的文件都是外鏈直接可以訪問的，而私用空間想要下載需要費一番功夫。因為我們需要把圖片存在雲里面供別人訪問，所以將這個空間設置為公開即可。例如我的空間為duoduo。 

生成token

在sdk里面會發先有test這一組測試用的包，其中有一個Uptoken，這個就是用來生成token的，將里面的bucketName設置為你的圖片空間，例如我的是duoduo。PutPolicy里面的參數請參照官網api。

package com.qiniu; import java.util.UUID; import org.json.JSONException; import com.qiniu.Mac; import com.qiniu.Config; import com.qiniu.PutPolicy; public class Uptoken { public final static String makeUptoken() throws AuthException, JSONException { Mac mac = new Mac(Config.ACCESS_KEY, Config.SECRET_KEY); String bucketName = "duoduo"; PutPolicy putPolicy = new PutPolicy(bucketName); // 可以根據自己需要設置過期時間,sdk默認有設置，具體看源碼 // putPolicy.expires = getDeadLine(); putPolicy.returnUrl = "http://127.0.0.1/QiNiuCallback.jsp"; putPolicy.returnBody = "{\"name\": $(fname),\"size\": \"$(fsize)\",\"w\": \"$(imageInfo.width)\",\"h\": \"$(imageInfo.height)\",\"key\":$(etag)}"; String uptoken = putPolicy.token(mac); return uptoken; } /** * 生成32位UUID 並去掉"-" */ public static String getUUID() { return UUID.randomUUID().toString().replaceAll("-", ""); } } 

上傳流程

七牛的上傳流程如下圖

用戶上傳后，七牛怎樣將上傳結果返回給用戶呢？有兩種方式，簡單的說一個是get方法傳值，一個是post傳值。returnUrl用的就是get（301跳轉），而callbackUrl 則是post（異步回調）。

 

可以看到我在Uptoken使用的是returnUrl，注意這里要寫絕對路徑*，而returnBody里面可以參照api來設置，我在這里取了文件上傳前的名字(name)，現在的名字(key)，並把他們拼成了json的格式，實際上僅僅需要key就可以和ueditor集成。另外，policy里面的deadline不需要操心，sdk里面有默認的設置，當然你也可以自行設置，不過注意，時間一定要大於當前時間。

putPolicy.returnUrl = "http://127.0.0.1/QiNiuCallback.jsp"; putPolicy.returnBody = "{\"name\": $(fname),\"size\": \"$(fsize)\",\"w\": \"$(imageInfo.width)\",\"h\": \"$(imageInfo.height)\",\"key\":$(etag)}"; 

集成ueditor

ok，准備工作完畢，開始集成ueditor，上官網下載最新的jsp版本，當前為1.2.6.1 Jsp ，utf8版。解壓，扔在項目里面WebContent。

找到ueditor.config.js這個配置文件，更改一些配置，使ueditor與七牛結合。

首先是URL，這是為了讓項目能找到ueditor里面的一些文件，還記得注意事項里面說的將server.xml更改的問題嗎，就是為了/ueditor/准備的，當然你也可以自行配置，不過可能會遇到一些路徑的問題，比如returnUrl。

var URL = window.UEDITOR_HOME_URL || "/ueditor/"; 

然后是圖片上傳的部分，imageUrl就是七牛傳圖片的地址是http://up.qiniu.com/，imagePath則是用戶訪問圖片的一個修正路徑，從哪里找呢？在設置的圖片空間（duoduo）里面的空間設置->域名設置那里查看，如圖。七牛需要兩個字段，一個是file，一個是token，file在ueditor中需要設置兩次，第一次是在這里設置，第二次和token都在image.html里面設置，后面會說。

    //圖片上傳配置區 ,imageUrl:"http://up.qiniu.com/" //圖片上傳提交地址 ,imagePath:"http://duoduo.u.qiniudn.com/" //圖片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置 //七牛結合需要改成file ,imageFieldName:"file" 

下一步，在index.html里面顯示ueditor，沒什么說的，代碼如下。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ueditor 七牛</title> <link rel="stylesheet" type="text/css" href="/QiNiu/ueditor/themes/default/css/ueditor.css"/> <script type="text/javascript" src="/QiNiu/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="/QiNiu/ueditor/ueditor.all.js"></script> </head> <body> <div style="width:800px;margin:20px auto 40px;"> <script type="text/plain" id="editor" name="content" style="width:100%;height:200px;"></script> </div> <script type="text/javascript"> UE.getEditor('editor') </script> </body> </html> 

接下來，在ueditor/dialogs/image下找到image.html，這是圖片上傳的配置文件，image文件夾底下的東西都是和圖片上傳有關的，如果需要更高級的配置，請參照源碼（image.js），結合ueditor.config.js里面的參數，進行操作。

image.html在這個文件加載的時候，我們需要從后台Uptoken那里拿到這次上傳的token(token每次上傳都是不一樣的，因為他會自動加上deadline進行Base64編碼)，使用ajax，我用的是jquery。在image.html里面加了一個hidden的input框，暫時存一個變量，也就是需要傳給七牛的token。

<input id="qiniu_token" type="hidden" name="token" /> 

然后找到下面的標簽，ajax取值，這里用的是一個Uptoken.jsp，后面介紹。注意我貼上的代碼editor.setOpt部分有一個變量imageFieldName:"file",這就是file的第二次修改地方。

<script type="text/javascript"> $(function(){ $.get("/QiNiu/Uptoken.jsp", function(data) { $("#qiniu_token").val(data["token"]); }); }); //全局變量 var imageUrls = [], //用於保存從服務器返回的圖片信息數組 selectedImageCount = 0; //當前已選擇的但未上傳的圖片數量 editor.setOpt({ imageFieldName:"file", compressSide:0, maxImageSideLength:900 }); ......

ueditor怎么在圖片上傳的時候傳附加的參數呢？首先找到utils.domReady(function()這個部分地下的ext:'{"param1":"value1", "param2":"value2"}',,把這行注釋掉，以為以前用的時候如果這行沒注釋自己的附加值傳不過去。往下找在 $G("upload").onclick = function () {里面找到postParams,加上你想傳的參數。

 var postParams = {
                "dir":baidu.g("savePath").value, "token":$("#qiniu_token").val() }; 

下面介紹上傳和回調有關的兩個jsp

* Uptoken.jsp，這是為了獲得uptoken，並且把token包成json的。 * QiNiuCallback.jsp，七牛returnUrl的回調地址，需要將七牛的狀態碼轉換為ueditor的狀態碼，這樣才能正確顯示。 

Uptoken.jsp，使用org.json-chargebee-1.0.jar這個包，這是sdk里面自動下的。然后調用 Uptoken.makeUptoken()取到token放到json里面，ok。

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ page import="com.qiniu.*,org.json.JSONObject"%> <% request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.setContentType("application/json"); JSONObject json = new JSONObject(); json.append("token", Uptoken.makeUptoken()); response.getWriter().print(json.toString()); %>

現在你就可以上傳了。傳圖之前，打開狐火firebug，查看網絡面板里面查看網絡的信息，當你點擊開始上傳按鈕之后，就會看到網絡面板里面七牛以301get方式回調你當時returnUrl里面設定的地址，打開七牛的空間可以看到你上傳成功的圖片。

QiNiuCallback.jsp，圖片上傳之后七牛主要有兩種狀態，一種是成功，一種是失敗，成功就會按照你在policy里面設置的returnBody的格式回調，如果失敗，則會返回一個json格式類似{"error":"錯誤信息"}，而ueditor里面需要一個json格式的state來告訴他圖片上傳的狀態，如果state是"SUCCESS"，則ueditor認為此次上傳成功，其余狀態均為失敗。所以我的回調jsp如下。

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ page import="com.qiniu.*,org.json.JSONObject"%> <% request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String upload_ret = request.getParameter("upload_ret"); JSONObject callback = new JSONObject(Base64Coder.decode(upload_ret)); JSONObject json = new JSONObject(); if (callback.has("error")) { json.put("state", callback.get("error")); } else { json.put("original", callback.get("name")); json.put("url", callback.get("key")+"-v001"); json.put("state", "SUCCESS"); } response.getWriter().print(json.toString()); %>

在這里加了一個"v001",json.put("url", callback.get("key")+"-v001");這是什么呢？七牛會存你上傳的原圖，如果原圖過大，顯示效果可能不會很好，因此，可以使用七牛的縮略圖功能。首先新建一個v001的縮略圖模板(名字隨便起)。在空間的數據處理，圖片處理那個位置。 設置了縮略圖之后怎么訪問呢？就是原圖的外鏈地址加上樣式分隔符加上縮略圖模板名字，例如圖片的key為XXXAAA，樣式分隔符為-，模板名為v001，則縮略圖url為XXXAAA-v001。

另外Base64Coder.decode這個是解碼的類，因為七牛在回調的時候回調的字符串也經過了Base64編碼。sdk里面沒找到解碼的方法，需要加上這個解碼的類，代碼如下。

package com.qiniu; import org.apache.commons.codec.binary.Base64; import org.apache.commons.codec.binary.StringUtils; public class Base64Coder { public static String decode(String s) { return StringUtils.newStringUtf8(Base64.decodeBase64(s)); } public static String encode(String s) { return Base64.encodeBase64String(StringUtils.getBytesUtf8(s)); } } 

至此，圖片本地上傳功能結束。

將ueditor中的圖片模塊的在線管理功能和七牛結合

第一步，更改ueditor.config.js，找到imageManagerUrl，雖然和ueditor里面的里面在線管理jsp的名字一樣，不過請注意他的路徑。imageManagerPath則是一個圖片修正路徑，和之前圖片上傳的修正路徑對應。

    //圖片在線管理配置區 ,imageManagerUrl: "imageManager.jsp" //圖片在線管理的處理地址 ,imageManagerPath:"http://duoduo.u.qiniudn.com/" 

然后是imageManager.jsp，經過ueditor里面imageManager.jsp和Uploader.java兩個文件的研究發現，imageManager.jsp實際上是會返回一個/圖片aue_separate_ue/圖片bue_separate_ue/圖片cue_separate_ue的字符串，然后image.js會將這個串根據ue_separate_ue切割，並且在前面加上imageManagerPath組成最終的一個圖片列表。搞明白機制之后不難根據七牛的sdk寫出如下的代碼。

<%@ page language="java" pageEncoding="utf-8"%> <%@ page import="java.util.*,com.qiniu.*"%> <%@ page import="java.io.*"%> <%@ page import="javax.servlet.ServletContext"%> <%@ page import="javax.servlet.http.HttpServletRequest"%> <% Mac mac = new Mac(Config.ACCESS_KEY, Config.SECRET_KEY); RSFClient client = new RSFClient(mac); ListPrefixRet list = client.listPrifix("duoduo", "", "", 10); StringBuffer sb = new StringBuffer(); for (ListItem item : list.results) { sb.append("/"); sb.append(item.key); sb.append("ue_separate_ue"); } String imgStr = sb.toString(); if (imgStr != "") { imgStr = imgStr .substring(0, imgStr.lastIndexOf("ue_separate_ue")) .replace(File.separator, "/").trim(); } out.print(imgStr); %> 

至此，ueditor和七牛雲存儲圖片功能的全部整合就結束了。圖片上傳的配置主要在image.html里面。