python+ueditor+七牛雲端儲存整合，pythonueditor

python+ueditor+七牛雲端儲存整合，pythonueditor

開發環境：python pyramid。

參考網址：http://developer.qiniu.com/docs/v6/sdk/python-sdk.html，http://my.oschina.net/duoduo3369/blog/174655

項目中要將ueditor整合到網站，但是圖片上傳有問題。於是採取用戶端（終端使用者） => 七牛 => 商務服務器的方式來處理圖片。詳細的流程這篇文章寫的很清楚：http://my.oschina.net/duoduo3369/blog/174655，不過是java的，而且也沒做圖片顯示的處理。整個流程如下：

以下是幾個關鍵步驟：

簽名產生token設定項目服務端請求路徑：/ueditor/uptoken用來產生uptoken。

@view_defaults(route_name='ueditor')class UeditorView(object):        def __init__(self, request):        self.request = request        self.db = request.db        qiniu.conf.ACCESS_KEY = "your access_key"        qiniu.conf.SECRET_KEY = "your secret_key"        self.bucket_name="你的七牛空間名"    @view_config(renderer='jsonp', match_param=('action=uptoken'))    def uptoken(self):        policy = qiniu.rs.PutPolicy(self.bucket_name)        token= policy.token()        return dict(token=token)    @view_config(renderer='jsonp', match_param=('action=imgmanage'))    def imgmanage(self):        pass

還有一個/ueditor/imgmanage用來圖片管理的，這個暫時沒做。使用前先用easy_install安裝qiniu的包並import一下。
配置ueditor上傳請求我用的版本是ueditor1_2_6_1-jsp-utf8版本。要改動的是dialogs/image/image.html檔案：在body裡面添加一個表單，用來向七牛伺服器上傳token：

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

在javascript標籤中加入以下代碼用來向專案服務器擷取uptoken：

        $(function(){            $.get("/ueditor/uptoken", function(data) {                $("#qiniu_token").val(data["token"]);            });        });

然後在上傳按鈕點擊事件 $G("upload").onclick中添加token參數：

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

還需要改ueditor下的ueditor.config.js檔案，在window.UEDITOR_CONFIG配置中修改圖片上傳配置：

window.UEDITOR_CONFIG = {        //為編輯器執行個體添加一個路徑，這個不能被注釋        UEDITOR_HOME_URL : URL        //圖片上傳配置區        ,imageUrl:"http://up.qiniu.com/"            //圖片上傳提交地址        ,imagePath:"http://shikeim.qiniudn.com/"   //圖片修正地址，這是七牛雲應用空間的地址        ,imageFieldName:"file"//七牛結合需要改成file

這樣圖片就可以正常上傳到七牛雲端服務器了。在ueditor中顯示圖片調試了好久，發現image.html下面有個回呼函數對象callbacks。這是上傳成功的回呼函數：

// 單個檔案上傳完成的回調                uploadCompleteCallback: function(data){                    try{                        var info = eval("(" + data.hash + ")");                        info && imageUrls.push(info);                        selectedImageCount--;                    }catch(e){                    console.log("excetion!up load failed...");                    }                },

但事實上七牛雲圖片上傳成功了，響應的卻是uploadErrorCallback上傳失敗回呼函數，於是將原來的uploadErrorCallback注釋掉，自己重新寫了個：

//qiniu yun 上傳...                uploadErrorCallback: function(data){                    try{                        var info = eval("(" + data.info + ")");                        imgurl={normal:info['hash'],small:info['hash']+'-small'};                        imageUrls.push(imgurl);                        // console.log(imageUrls);                        selectedImageCount--;                    }catch(e){                        console.log("excetion!up load failed...");                    }                },

imgurl就是七牛雲返回的伺服器端圖片檔案名稱，我在七牛雲上做了配置上傳的圖片有原版normal，還有縮圖版small，這兩個都返回了，便於編輯器處理。改完之後發現圖片能插入了，但是無法正確顯示，審查元素髮現是圖片名undefined，於是又看image.js的源碼，發現插入圖片的是insertBatch函數，於是就該了下：

/**     * 插入多張圖片     */    function insertBatch() {        if (imageUrls.length < 1) return;        var imgObjs = [],            align = findFocus("localFloat", "name");        for (var i = 0, ci; ci = imageUrls[i++];) {            var tmpObj = {};            console.log(ci);            tmpObj.title = ci.title;            tmpObj.floatStyle = align;            //修正顯示時候的地址資料,如果後台返回的是圖片的絕對位址，那麼此處無需修正            tmpObj._src = tmpObj.src = editor.options.imagePath + ci.small;//這裡使用縮圖            imgObjs.push(tmpObj);        }        insertImage(imgObjs);        hideFlash();    }

至此圖片上傳成功整合。不過還有一些小細節需要完善。
總結有問題先網上查，查的目的不是找答案，而是找思路。明白思路後看文檔，答案都在源碼中。

又拍雲端儲存與七牛雲端儲存有什不同？

特有的上傳加速能力。其他雲端儲存通常只加速下載（CDN）。有的號稱支援上傳加速，其實也就只是做了上傳的代理節點。但是七牛是全球首家採用多IDC架構的分布式儲存。資料就近上傳到某個IDC即落地，真正加速到極致。
特有的斷點續上傳功能。不再需要網路不行時在那一遍遍從頭再來。無論網路多糟糕（尤其是3G/2G移動網路）、無論檔案多大，我們都能夠保證讓你的資料到達伺服器。這個在國內仍然沒有其他雲端儲存能夠做到。
CDN整合。七牛目前整合了包括藍汛、網宿在內的 4 家 CDN，總節點數已經超過 1000 個IDC，這讓自建 CDN 望塵莫及。我們不重新發明輪子。但我們要讓 CDN 從高端走向平民。為什麼只能大公司才能享受 CDN 帶來的好處？有了七牛，你就是個部落客也可以享受高品質的快感。七牛還幫你做了智能的 CDN 品質監測。萬一某家 CDN 出現局部節點問題時，七牛還能夠自動幫你把該地區切換到另一家 CDN，整個過程透明，讓你省時省心。
獨特的鏡像儲存，體驗七牛雲端儲存只需一鍵。
流媒體（音視頻處理）支援。這個目前國內雲端儲存也是首家。悄悄告訴你，最近音視頻支援還會重大更新哦。
資料處理功能的級聯（也就是管道）。圖片先縮減再打浮水印，是管道功能的典型案例。
大檔案支援。七牛雲端儲存單檔案最大支援到1TB（不夠用請告訴我 ^_^）。
 
織夢dedecms整合七牛雲端儲存

恕我孤陋寡聞了，沒有聽說過