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来实现图片上传和管理了。