UEditor上传图片到七牛C#（后端实现）

时间 2019-11-18

标签 ueditor 上传图片七牛 7牛 c# 后端实现栏目 C# 繁體版

原文原文链接

因为我的网站空间存储有限因此选择将图片统一存储到七牛上，理由很简单html

1 免费10G 的容量，对我的网站足够用前端

2 规范的开发者文档和完善的sdk（几乎全部热门语言sdk）java

总体思路

图片上传七牛云在我看来无非两种方式ajax

1 前端表单或ajax异步提交请求到七牛服务器，固然此时也须要通过后端获取相应的 token （图片->七牛服务器）json

2 直接后端代码请求七牛服务器，官方有各版本语言的sdk 提供，可提升开发效率，下降开发难度 (图片->本身服务器->七牛服务器)后端

因本文介绍的是使用 ueditor 图片上传七牛云，因此若是使用方式1 要改的应该是 ueditor 的js 源码文件以及 config配置文件等信息七牛云存储

使用方式2 的话须要改后台代码（ueditor 不一样后台语言都有相应的源码，下载时候自带）服务器

七牛云存储的简单介绍与使用

为了更好的理解后面的内容咱们先来了解一下七牛云存储 app

1. 固然首先你得注册一个七牛帐号，而后进入进入对象存储，新建一个存储空间这个就至关于在服务器上件一个文件夹，这个颇有必要后期代码中要用到。dom

2 建完以后你在对应存储空间找到内容管理的tab页能够看到外链默认域名个人是opvqiebq9.bkt.clouddn.com 这个就是到时候你图片要访问的地址好比opvqiebq9.bkt.clouddn.com/img1.jpg

3. 固然做为本身的网站确定有本身的域名，怎么会容许本身的图片外链长这丑样呢，这时只需作一个本身网站二级域名的绑定我用的是img.siyouku.cn

点击域名绑定tab页面,这里用普通域名就能够

4 绑定好以后绑定好通常一两小时就回生成一个要解析用的cname域名接下来还须要去你的域名提供商管理后台添加一个cname解析，点这里教程

好了以上是七牛存储空间的基本设置，此时img.siyouku.cn 就至关于你的图片服务器了，接下来咱们要作的就是上传图片

上传具体实现

本文使用的是上面说的第二种方式也就是改写ueditor后端代码直接请求七牛服务器进行上传，前端方式目前网上已经有一些很好的教程

能够参考 http://www.cnblogs.com/chshapple/archive/2015/09/11/4802208.html

https://my.oschina.net/duoduo3369/blog/174655

1 首先咱们要先找到七牛的C#版的SDK ，教程很是详细，让咱们知道怎么引用和使用基本的类库 https://developer.qiniu.com/kodo/sdk/1237/csharp

2 接下来咱们定位上传文件，咱们会发现有不少上传方式这里咱们选择文件流上传做为例子，其实sdk已经帮咱们作了几乎全部的事情咱们只须要把这段代码改写到你的ueditor的上传代码中就ok了，

代码中重要的几个点 1. accesskey 和secretkey 这个是在你的七牛后台管理中能找到，我的中心->密钥管理

2. buckut 这个也就是前面建立存储空间填写的惟一的名称我这里是 siyouku

3. 还有就是saveKey 这个能够用图片的名称

 1 // 生成(上传)凭证时须要使用此Mac
 2 // 这个示例单独使用了一个Settings类，其中包含AccessKey和SecretKey
 3 // 实际应用中，请自行设置您的AccessKey和SecretKey
 4 Mac mac = new Mac(Settings.AccessKey, Settings.SecretKey);
 5  
 6 string bucket = "test";
 7 string saveKey = "1.jpg";
 8  
 9 // 上传策略，参见
10 // https://developer.qiniu.com/kodo/manual/put-policy
11 PutPolicy putPolicy = new PutPolicy();
12  
13 // 若是须要设置为"覆盖"上传(若是云端已有同名文件则覆盖)，请使用 SCOPE = "BUCKET:KEY"
14 // putPolicy.Scope = bucket + ":" + saveKey;
15 putPolicy.Scope = bucket;
16  
17 // 上传策略有效期(对应于生成的凭证的有效期)
18 putPolicy.SetExpires(3600);
19  
20 // 上传到云端多少天后自动删除该文件，若是不设置（即保持默认默认）则不删除
21 putPolicy.DeleteAfterDays = 1;
22  
23 // 生成上传凭证，参见
24 // https://developer.qiniu.com/kodo/manual/upload-token
25  
26 string jstr = putPolicy.ToJsonString();
27 string token = Auth.CreateUploadToken(mac, jstr);
28  
29 try
30 {
31 string url = "http://img.ivsky.com/img/tupian/pre/201610/09/beifang_shanlin_xuejing-001.jpg";
32 var wReq = System.Net.WebRequest.Create(url) as System.Net.HttpWebRequest;
33 var resp = wReq.GetResponse() as System.Net.HttpWebResponse;
34 using (var stream = resp.GetResponseStream())
35 {
36 // 请不要使用UploadManager的UploadStream方法，由于此流不支持查找(没法获取Stream.Length)
37 // 请使用FormUploader或者ResumableUploader的UploadStream方法
38 FormUploader fu = new FormUploader();
39 var result = fu.UploadStream(stream, "xuejing-001.jpg", token);
40 Console.WriteLine(result);
41 }
42 }
43 catch (Exception ex)
44 {
45 Console.WriteLine(ex);
46 }
47 }

View Code

3 接下来咱们在 ueditor 的代码文件夹下面增长一个类来控制代码上传七牛云而且返回相应的文件名，新建名称为 MyUploadHandler 的控制类，其代码结构跟UploadHandler 同样，

在这里咱们只要其中的改 Process 方法。

4 下面直接贴 process中上传的代码，

代码总体思路就是将文件以流的方式经过七牛的sdk 进行上传，结合上面的上传例子应该很好理解，最后咱们只须要将获得的结果反序列化返text就行

 1  public override void Process()
 2         { 
 3             string uploadFileName = null;
 4             var accessKey = "填写在你七牛后台找到相应的accesskey";
 5             var secretKey = "填写在你七牛后台找到相应的secretkey";
 6             HttpPostedFile  file = Request.Files[UploadConfig.UploadFieldName];
 7             Stream myStream = file.InputStream;
 8             
 9             uploadFileName = file.FileName;
10   
11             if (!CheckFileType(uploadFileName))
12             {
13                 Result.State = UploadState.TypeNotAllow;
14                 WriteResult();
15                 return;
16             }
17             if (!CheckFileSize(file.ContentLength))
18             {
19                 Result.State = UploadState.SizeLimitExceed;
20                 WriteResult();
21                 return;
22             }
23             // 生成(上传)凭证时须要使用此Mac
24             // 这个示例单独使用了一个Settings类，其中包含AccessKey和SecretKey
25             // 实际应用中，请自行设置您的AccessKey和SecretKey
26             Mac mac = new Mac(accessKey, secretKey);
27             string bucket = "siyouku";
28             string saveKey = uploadFileName;
29 
30 
31             // 使用前请确保AK和BUCKET正确，不然此函数会抛出异常(好比code612/631等错误)
32             Qiniu.Common.Config.AutoZone(accessKey, bucket, false);
33 
34 
35             // 上传策略，参见 
36             // https://developer.qiniu.com/kodo/manual/put-policy
37             PutPolicy putPolicy = new PutPolicy();
38             // 若是须要设置为"覆盖"上传(若是云端已有同名文件则覆盖)，请使用 SCOPE = "BUCKET:KEY"
39               putPolicy.Scope = bucket + ":" + saveKey;
40             //putPolicy.Scope = bucket;
41             // 上传策略有效期(对应于生成的凭证的有效期)          
42             putPolicy.SetExpires(3600);
43             // 上传到云端多少天后自动删除该文件，若是不设置（即保持默认默认）则不删除
44             putPolicy.DeleteAfterDays = 1;
45 
46             // 生成上传凭证，参见
47             // https://developer.qiniu.com/kodo/manual/upload-token            
48             string jstr = putPolicy.ToJsonString();
49             string token = Auth.CreateUploadToken(mac, jstr);
50             try
51             {
52                     // 请不要使用UploadManager的UploadStream方法，由于此流不支持查找(没法获取Stream.Length)
53                     // 请使用FormUploader或者ResumableUploader的UploadStream方法
54                     FormUploader fu = new FormUploader();
55                     var result = fu.UploadStream(myStream, saveKey, token);
56                 var x = Newtonsoft.Json.JsonConvert.DeserializeObject<QiniuResult>(result.Text);
57                 Result.Url = x.key;
58                Result.State = UploadState.Success;
59             }
60             catch (Exception e)
61             {
62                 Result.State = UploadState.FileAccessError;
63                 Result.ErrorMessage = e.Message;
64             }
65             finally
66             {
67                 WriteResult();
68             }
69  
70         }

View Code

5 最后你会发现上传成功的图片仍是不能正确在 ueditor中显示，错误以下图，查看html源码你会发现是其路径不对，因此咱们要有一个很重要的步骤，也就是改config.json 配置文件中的imageUrlPrefix 属性改成你的七牛上图片的域名，也就是前面绑定的 img.siyouku.cn

ok到这里你就已经完成了editor 上传图片到七牛云了，