1. 程式人生 > >UEditor上傳圖片到七牛C#(後端實現)

UEditor上傳圖片到七牛C#(後端實現)

nco nag manage ora 個人 finall code 七牛存儲 json

由於個人網站空間存儲有所以選擇將圖片統一存儲到七牛上,理由很簡單

1 免費10G 的容量 ,對個人網站足夠用

2 規範的開發者文檔 和完善的sdk(幾乎所有熱門語言sdk)

整體思路

圖片上傳七牛雲 在我看來無非兩種方式

1 前端表單或ajax異步提交請求到七牛服務器 ,當然此時也需要經過後端獲取相應的 token (圖片->七牛服務器)

2 直接後端代碼請求 七牛服務器 ,官方有各版本語言的sdk 提供 ,可提高開發效率 ,降低開發難度 (圖片->自己服務器->七牛服務器)

因本文介紹的是使用 ueditor 圖片上傳七牛雲 , 所以如果使用方式1 要改的應該是 ueditor 的js 源碼文件 以及 config配置文件等信息

使用方式2 的話 需要改後臺代碼(ueditor 不同後臺語言都有相應的源碼,下載時候自帶)

七牛雲存儲的簡單介紹與使用

為了更好的理解後面的內容 我們先來了解一下七牛雲存儲

1. 當然首先你得註冊一個七牛賬號 ,然後進入進入對象存儲,新建一個存儲空間這個就相當於在服務器上件一個文件夾,這個很有必要後期代碼中要用到。

技術分享

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 上傳圖片到 七牛雲了 ,

技術分享

UEditor上傳圖片到七牛C#(後端實現)