C# .net Ueditor實現圖片上傳到阿里雲OSS 對象存儲

項目中須要實如今Ueditor編輯器中將圖片上傳到雲儲存中

 

如今雲計算產品服務已經很廣泛，市場產品也有不少選擇，感興趣的同窗能夠去搜索下雲存儲，這裏我選擇了阿里雲的對象存儲服務，他們叫作阿里雲 OSS（Object Storage Service），實現以前我簡單的說下幾個概念，加深本身的理解

 

 

1.一、什麼是雲存儲

雲存儲是在雲計算(cloud computing)概念上延伸和發展出來的一個新的概念，是一種新興的網絡存儲技術，是指經過集羣應用、網絡技術或分佈式文件系統等功能，將網絡中大量各類不一樣類型的存儲設備經過應用軟件集合起來協同工做，共同對外提供數據存儲和業務訪問功能的一個系統。當雲計算系統運算和處理的核心是大量數據的存儲和管理時，雲計算系統中就須要配置大量的存儲設備，那麼雲計算系統就轉變成爲一個雲存儲系統，因此雲存儲是一個以數據存儲和管理爲核心的雲計算系統。簡單來講，雲存儲就是將儲存資源放到雲上供人存取的一種新興方案。使用者能夠在任什麼時候間、任何地方，透過任何可連網的裝置鏈接到雲上方便地存取數據。——資料來自百度百科（雲存儲）

 

簡單的來講，如今大型網站開發大都採用這樣的架構方式(分佈式文件系統)，圖片、文件、資料上傳到雲存儲，提供雲存儲服務的公司有專業的團隊來幫你維護你的資源、安全可靠、價格較低。

 

 

1.二、對象存儲有那些具體的優勢

一張圖讓你快速瞭解對象存儲——圖片截取自阿里雲OSS首頁

 

 

1.三、爲何大型網站選擇將圖片等放入單獨的域名(雲存儲的使用)

1.3.一、下降主站服務器的壓力，分流。

1.3.二、能夠下降cookie的流量佔用。

1.3.三、CDN（將源站內容分發至全國全部的節點，縮短用戶查看對象的延遲，提升用戶訪問網站的響應速度與網站的可用性，解決網絡帶寬小、用戶訪問量大、網點分佈不均等問題）。

1.3.四、安全性高（各個服務公司都有對數據進行備份和安全機制處理）

1.3.四、雲存儲價格較低，隨用隨升，按量定製。

 

 

能夠看出好處仍是不少的，話很少說，進入正題，

1.四、開通服務在使用以前，咱們先弄清楚 OSS 的幾個基本概念。

1.4.一、咱們上傳的全部數據文件在OOS上以對象（object）的形式上傳到存儲空間（bucket）中。 因此咱們至少建立一個存儲空間，而後向每一個存儲空間中添加一個或多個文件。

1.4.二、已上傳文件以（bucket+endpoint爲地址）進行文件的分享和下載。經過修改存儲空間或文件的屬性或元信息，還能夠設置相應的訪問權限。

1.4.三、阿里雲OSS在管理控制檯管理和執行基本和高級 OSS 任務，您還能夠經過阿里雲開發工具包或經過直接在應用程序中進行 REST API 調用執行基本和高級 OSS 任務。(這裏我在項目中使用API調用服務)

 

 

 

接下來咱們下載 官網提供 的.NET SDK

安裝的方式有不少種

 

NuGet安裝、GitHub安裝、DLL引用方式安裝、項目引入方式安裝

由於還歷來沒有嘗試過NuGet，因此好奇心下我決定採用這種姿式來安裝(後來我發現它是個好東西啊，我決定之後多寵幸它)

 

簡單的說說NuGet：

 

NuGet 是一個Visual Studio的擴展。在使用Visual Studio開發基於.NET Framework的應用時，NuGet可以令你在項目中添加、移除和更新引用的工做變得更加快捷方便。（咱們在安裝Vs的時候通常都會附加，若是沒有就須要額外安裝）

 

 

這就是說: 咱們每每在開發項目裏，會使用一些第三方的dll, 如：Newtonsoft.Json.dll (它爲咱們提供了進行序列化和反序列化解決方案）

可是，咱們每每也面臨隨着項目升級，對這些引入的第三方插件進行升級的可能和必要。

 

如今，NuGet 將這個過程系統化（代替你去尋找它的最新版本，下載，解壓，而後替換等操做），令你能夠更加方便的查找你要的第三方的dll， 同時，還能夠爲你提供自動或者手動更新的方式來升級你的插件。整個過程幫咱們省事很多~

 

 

 

 

安裝過程：

 

解決方案中右擊

 

再下圖搜索框輸入須要安裝的SDK包(輸入阿里雲或aliyun.oss.sdk)、點擊安裝便可，只要選擇安裝到指定的項目中便可。一鍵導入很方便有木有

安裝完成

 

 

 

——————————————————————————————————————————————

——————————————————— 簡單粗暴的分隔線———————————————————

——————————————————————————————————————————————

 

 

 

1、下面開始改造Ueditor上傳圖片的服務(安裝配置過程參照官網文檔)

 

• Ueditor（App_Code目錄）: 上的文件是應用程序的源碼。
• 成功發現UploadHandler.cs類，基於此類咱們就能夠完成上傳的功能。

 

觀察UploadHandler中Process()方法裏面的這段代碼是實現將圖片上傳保存到網站目錄下

先將代碼註釋掉

 

而後本身寫上傳到阿里雲的代碼

 

 

 1 //上傳到阿里雲  
 2 using (Stream fileStream = new MemoryStream(uploadFileBytes))//轉成Stream流  
 3 {  
 4     var fs = Request.Files[UploadConfig.UploadFieldName];  
 5     string md5 = OssUtils.ComputeContentMd5(fileStream, fs.ContentLength);  
 6     string today = DateTime.Now.ToString("yyyyMMdd");  
 7     string FileName = uploadFileName + today + Path.GetExtension(uploadFileName);//文件名=文件名+當前上傳時間  
 8     string FilePath = "Upload/" + today + "/" + FileName;//雲文件保存路徑  
 9     try  
10     {  
11         //初始化阿里雲配置--外網Endpoint、訪問ID、訪問password  
12         OssClient aliyun = new OssClient("https://oss-cn-【外網Endpoint區域】.aliyuncs.com", "your Access Key ID", "your Access Key Secret");  
13   
14         //將文件md5值賦值給meat頭信息，服務器驗證文件MD5  
15         var objectMeta = new ObjectMetadata  
16         {  
17             ContentMd5 = md5,  
18         };  
19         //文件上傳--空間名、文件保存路徑、文件流、meta頭信息(文件md5) //返回meta頭信息(文件md5)  
20         aliyun.PutObject("bucketName", FilePath, fileStream, objectMeta);  
21   
22         //返回給UEditor的插入編輯器的圖片的src  
23         Result.Url = "http://bucketName.oss-cn-【外網Endpoint區域】.aliyuncs.com/" + FilePath;  
24         Result.State = UploadState.Success;  
25     }  
26     catch (Exception e)  
27     {  
28         Result.State = UploadState.FileAccessError;  
29         Result.ErrorMessage = e.Message;  
30     }  
31     finally  
32     {  
33         WriteResult();  
34     }  
35 }  

 

上傳功能實現（能上傳但還不能在編輯器中預覽，還須要改造下Ueditor配置文件，見第二部分~ ~ ）

 

ps：這裏由於PutObject方法第三個參數須要Stream，而Ueditor源碼是讀取文件的byte[]，小白的看不太懂源碼就不太敢改，而是將獲取的文件字節轉換成了Stream流來上傳使用。

 

 

 

另外須要一提的是

 

OssClient aliyun = new OssClient("https://oss-cn-【外網Endpoint區域】.aliyuncs.com", "your Access Key ID", "your Access Key Secret");  

 

 

一、這裏的 外網Endpoint區域須要自行替換成你建立bucket裏面分配的OSS區域，可在bucket概覽中查看

 

二、 Access Key ID和 Access Key Secret須要咱們去OSS建立（根據ID和Secret分配不一樣的權限操做OSS）

 

 

 

——————————————————————————————————————————————

——————————————————— 簡單粗暴的分隔線———————————————————

——————————————————————————————————————————————

 

 

 

2、接下來還須要更改Ueditor的上傳圖片的配置信息

 

 

去除Ueditor自動加上的圖片訪問路徑前綴，這樣咱們才能在上傳成功以後預覽到圖片。

 

 

查看Object內容，成功上傳到OSS。

 

 

——————————————————————————————————————————————

——————————————————— 簡單粗暴的分隔線———————————————————

——————————————————————————————————————————————

 

 

 

總結：在完成功能的路上也有走偏過掉到坑裏，但一名好的程序員要懂得不懂就查，在運用的過程當中要明白原理，知識不能停在表面的理解上，這樣才能觸類旁通，活學活用，同時我發現，在調用功能包的時候，首先須要多翻看官網提供的API文檔和功能介紹，理清它們以前的關係，否則對面各類類庫文件眼花繚亂，只會讓本身無從下手。

 

至此，成功完成Ueditor上傳圖片到阿里雲OSS功能。小白還須要進步，歡迎你們指點。