ueditor上傳圖片到七牛(CSharp版本)

ueditor是百度推出的一款文本編輯器，其內部提供了圖片上傳的邏輯，能夠把本地的圖片上傳到網站服務器。可是包括本人在內的不少草根站長可能會選擇把圖片放到其它一些CDN服務器上去，以便節約本身服務器的流量壓力。

本人選擇的是七牛雲存儲，由於它提供免費的圖片存儲服務，且支持外鏈、圖片處理等高級的功能（貌似阿里雲也正在推出相似的服務）。

好了，編輯器和圖片存儲都有了，如今問題是如何把二者結合起來，可否使用ueditor將圖片直接上傳到七牛，除此以外，在使用ueditor進行圖片管理的時候可以直接顯示七牛上的圖片。帶着問題去問度娘和谷哥，找到了一位朋友寫的ueditor上傳圖片到七牛雲存儲（form api,java），根據這篇文章的方法，基於C#語言，我也一樣成功實現了預期的功能。

---

準備工做

下載 ueditor, 我使用的是1.3.6 .Net utf-8 版本。

下載 七牛 C# SDK。

由於我用的是VS 2012, 因此新建一個類型爲「Asp.net MVC4 Web應用程序」的項目，而後將ueditor和七牛加入到解決方案中。

配置七牛

新建空間

登陸七牛後，選擇新建空間(記住在七牛中空間的代名詞是bucket，後面咱們會用到)，勾選「公開空間」。而後進行空間配置，能夠看到七牛爲咱們提供了不少有用的功能，諸如域名設置、防盜鏈、鏡像存儲等。

域名設置[可選]

咱們如今只要關注域名設置。你可使用七牛提供的二級域名也可使用本身站點的域名。指定本身的域名後，記住在你的DNS服務商中加入一個cname記錄，指向你七牛中的二級域名。

數據處理[可選]

七牛雲存儲內建了一個很是高效易用的數據處理框架。數據處理框架能夠管理和執行一系列符合規範的數據處理操做（fop）。開發者能夠在訪問資源時制定執行一個或多個數據處理指令，以直接獲取通過處理後的結果。

比較典型的一個場景是圖片查看。客戶端能夠上傳一張高精度的圖片，而後在查看圖片的時候根據屏幕規格生成一張大小適宜的縮略圖，好比爲iPhone生成一張960x640大小的縮略圖。這樣既能夠明顯下降網絡流量，並且能夠提升圖片顯示速度，還能下降移動設備的內存佔用。

新建一個名叫「small.jpg」的數據操做，提供對圖片進行縮放（寬或高最大500像素）同時添加水印的能力。

例，原圖地址爲 http://img.chenxu.me/demo.gif，  那麼進行數據處理後的圖片地址就變成  http://img.chenxu.me/demo.gif-small.jpg。

jpg後綴，並不表明當前的圖片是jpg格式。你徹底能夠取相似「abc.d.z.x」這種名稱

配置ueditor

1. 修改 ueditor.config.js 中的圖片上傳區

1 2 3 4 5 6

//圖片上傳配置區         , imageUrl: "http://up.qiniu.com/"             //圖片上傳提交地址                 , imagePath: "http://img.chenxu.me/"           //圖片修正地址，引用了fixedImagePath,若有特殊需求，可自行配置                 , imageFieldName: "file"                       //圖片數據的key,若此處修改，須要在後臺對應文件修改對應參數                 //,compressSide:0                              //等比壓縮的基準，肯定maxImageSideLength參數的參照對象。0爲按照最長邊，1爲按照寬度，2爲按照高度                 ,maxImageSideLength:1600                       //上傳圖片最大容許的邊長，超過會自動等比縮放,不縮放就設置一個比較大的值，更多設置在image.html中

imageUrl的地址修改成七牛的上傳地址。imagePath中則修改成上一節中你設立的域名。imageFiledName用於指定上傳的文件類型，這裏要改成「file」，同時在image.html中對應的地方也須要修改（後面會講到）。maxImageSideLength 修改爲你所容許上傳的最大邊長，默認爲900，若是你的圖片尺寸大於這個尺寸，那麼在上傳到七牛以前ueditor已經把圖片等比縮放成900的邊長，圖片就失真了。

2. 修改 ueditor.config.js 中的圖片管理區

1 2 3

//圖片在線管理配置區                 , imageManagerUrl: URL + "net/imageManager.ashx"       //圖片在線管理的處理地址                 , imageManagerPath: "http://img.chenxu.me/"            //圖片修正地址，同imagePath

把imageManagerPath的地址修改成你在七牛中的域名。

3. 修改 dialogs\image\image.html

由於咱們在上傳的時候須要向七牛傳遞一個token值，因此先在html中增長一個隱藏的input元素用來保存咱們的token值。

1 2 3 4 5 6 7 8

<div id="local" class="panel">                      <div id="flashContainer"></div>                           <div><div id="upload" style="display: none" ></div><div id="duiqi"></div><div id="localFloat"></div></div>       <div class="saveDir">                               <var id="lang_savePath" ></var><span id="saveDirSelector"><var id="lang_load_savePath"></var></span>                           </div>                           <input id="qiniu_token" type="hidden" name="token" />  <!-- 新增一個隱藏域 -->                 </div>

爲了可以使用jquery功能，請在image.html中增長一句對jquery的引用。而後修改以下代碼。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//=========新增代碼===================   $.ajax({       url: "http://"+location.host + "/Home/QiniuUploadToken",       type: "get"           }).done(function (data) {       $("#qiniu_token").val(data);   });   //====================================     editor.setOpt({       imageFieldName:"file", //修改爲file       compressSide:0,       maxImageSideLength:900   });

用ajax調用咱們ASP.Net MVC的接口，將獲得的值填充到咱們的隱藏域。 imageFieldName則修改爲與ueditor.config.js中同樣的「file」。至於QiniuUploadToken，後面會介紹。

修改完後，接着向下找到對 initSavePath 方法的調用，並註釋掉。不然在運行過程當中，它會發起對http://up.qiniu.com/?fetch=1的get操做，而這是不被容許的，七牛會返回405錯誤。

1	//initSavePath();

接着再向下找到以下代碼，並進行修改。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

$G("upload").onclick = function () {         //===========註釋掉下面的語句，不然就會直接結束，而沒法上傳=============       //if ( !savePathComplete ) {       //    alert('請等待保存目錄就緒!')       //    return;       //}               /**        * 接口imageUploader.setPostParams()能夠在提交時設置本次上傳提交的參數（包括全部圖片）        * 參數爲json對象{"key1":"value1","key2":"value2"}，其中key即爲向後臺post提交的name，value即爲值。        * 其中有一個特殊的保留key值爲action，若設置，能夠更改本次提交的處理地址        */                        var postParams = {            //===========註釋掉下面的語句，已經用不上了=============                          //"dir": baidu.g("savePath").value,                                            "token": $("#qiniu_token").val()   //增長token參數       };       imageUploader.setPostParams(postParams);       flashObj.upload();       this.style.display = "none";       //$G("savePath").parentNode.style.display = "none"; 同時註釋掉，不然會報null中不包含parentNode之類的錯誤信息  };

由於新的邏輯中已經不須要savePathComplete，而這個變量則可能會由於咱們沒有配置對ueditor所須要的上傳路徑而一直保持「false」，反而影響咱們的邏輯執行，因此能夠直接註釋掉。而後，在postParams中要加入一個新的參數「token」，這個值須要傳給七牛服務器。

配置解決方案

打開解決方案管理器，經過添加現有項目對話框，把以前咱們準備好的七牛sdk中的Qiniu文件夾中的Qiniu.4.0.csproj直接加入到解決方案中。

找到其中的Conf\Config.cs。修改其中的 Init 方法，將該方法修改爲靜態構造函數，以便該方法能在首次構造時執行。

1 2 3 4 5 6 7 8 9 10

static Config()   {       USER_AGENT = System.Configuration.ConfigurationManager.AppSettings["USER_AGENT"];       ACCESS_KEY = System.Configuration.ConfigurationManager.AppSettings["ACCESS_KEY"];       SECRET_KEY = System.Configuration.ConfigurationManager.AppSettings["SECRET_KEY"];       RS_HOST = System.Configuration.ConfigurationManager.AppSettings["RS_HOST"];       UP_HOST = System.Configuration.ConfigurationManager.AppSettings["UP_HOST"];       RSF_HOST = System.Configuration.ConfigurationManager.AppSettings["RSF_HOST"];       PREFETCH_HOST = System.Configuration.ConfigurationManager.AppSettings["PREFETCH_HOST"];   }

配置 Asp.net MVC 項目

在web.config中加入下列節點，用於暗示你在七牛中的配置，其中的 access_key 和 secret_key 請更換成你對應的值。該值能夠在七牛的後臺看到，進入後臺後，不要選擇任何一個空間，直接點擊帳號設置，選擇左邊的密鑰。

1 2 3 4 5 6 7 8 9 10 11

<appSettings>       <add key="webpages:Enabled" value="false" />       <!--for qiniu upload-->           <add key="USER_AGENT" value="qiniu csharp-sdk v6.0.0" />           <add key="ACCESS_KEY" value="填寫你在七牛中看到的access key" />           <add key="SECRET_KEY" value="填寫你在七牛中看到的secret key" />           <add key="RS_HOST" value="http://rs.Qbox.me" />           <add key="UP_HOST" value="http://up.qiniu.com" />           <add key="RSF_HOST" value="http://rsf.Qbox.me" />           <add key="PREFETCH_HOST" value="http://iovip.qbox.me" />     </appSettings>

注意要寫在最外側的web.config中，否則實際運行中沒法讀取相關節點

增長對咱們新引進的Qiniu項目的引用。

接着，修改HomeController，增長兩個新action。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

//==================for 七牛 ==================================       public ContentResult QiniuUploadToken()   {       var policy = new PutPolicy("chenxublog");       policy.ReturnUrl = "http://localhost:1407/home/QiniuUploadCallBack";       policy.ReturnBody = "{\"name\": $(fname),\"size\": \"$(fsize)\",\"w\": \"$(imageInfo.width)\",\"h\": \"$(imageInfo.height)\",\"key\":$(etag)}";       string token = policy.Token();       return Content(token);   }     public JsonResult QiniuUploadCallBack()   {       string ret = Request.QueryString["upload_ret"];       dynamic data = System.Web.Helpers.Json.Decode(DecodeFromBase64("UTF-8", ret));            return Json(new { original = data["name"], w = data["w"], h = data["h"], url = data["key"], state = "SUCCESS" }, JsonRequestBehavior.AllowGet);    }     private string DecodeFromBase64(string encode,string code)   {       string decode = "";       byte[] bytes = Convert.FromBase64String(code);       try            {           decode = Encoding.GetEncoding(encode).GetString(bytes);       }       catch            {           decode = code;       }       return decode;   }     //==============================================================

修改Home/index.cshtml，增長對ueditor的初始化語句

1 2 3 4 5 6 7 8 9

<script src="~/ueditor/ueditor.config.js"></script> <script src="~/ueditor/ueditor.all.min.js"></script> <script src="~/ueditor/lang/zh-cn/zh-cn.js"></script> <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> <script type="text/javascript">      //實例化編輯器          //建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例          UE.getEditor('editor');  </script>

通過上述步驟，你已經實現了使用ueditor上傳到七牛的功能。如今能夠運行Asp.net MVC項目來試驗下了。

修改imageManager.ashx

接下來，實現如何使用ueditor來進行圖片管理。用下列代碼替換原先的代碼。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

public void ProcessRequest(HttpContext context)     {         RSFClient client = new RSFClient("chenxublog"); //這裏填寫最早申請的空間名稱         var picColl = client.ListPrefix("chenxublog", "", ""); //取得空間內的全部圖片            StringBuilder sb = new StringBuilder();            //對圖片按照時間前後進行排序後輸出         foreach (var pic in (from x in picColl.Items orderby x.PutTime descending select x))          {             if (pic.Key.Length > 0)             {                 sb.AppendFormat("/{0}-small.jpg{1}", pic.Key, "ue_separate_ue"); //加上-small.jpg，這樣ueditor中獲得的就是處理後的圖片            }         }            sb.Length -= "ue_separate_ue".Length;         context.Response.ContentType = "text/plain";         context.Response.Write(sb.ToString());     }

OK，大功告成。如今能夠用ueditor來實現圖片上傳和管理了。