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

項目中需要實現在Ueditor編輯器中將圖片上傳到雲儲存中

 

現在雲計算產品服務已經很普遍，市場產品也有很多選擇，感興趣的同學可以去搜索下雲存儲，這里我選擇了阿里雲的對象存儲服務，他們叫做阿里雲 OSS（Object Storage Service），實現之前我簡單的說下幾個概念，加深自己的理解

 

 

1.1、什么是雲存儲

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

 

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

 

 

1.2、對象存儲有那些具體的優點

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

 

 

1.3、為什么大型網站選擇將圖片等放入單獨的域名(雲存儲的使用)

1.3.1、降低主站服務器的壓力，分流。

1.3.2、可以降低cookie的流量占用。

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

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

1.3.4、雲存儲價格較低，隨用隨升，按量定制。

 

 

可以看出好處還是很多的，話不多說，進入正題，

1.4、開通服務在使用之前，我們先弄清楚 OSS 的幾個基本概念。

1.4.1、我們上傳的所有數據文件在OOS上以對象（object）的形式上傳到存儲空間（bucket）中。 所以我們至少創建一個存儲空間，然后向每個存儲空間中添加一個或多個文件。

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

1.4.3、阿里雲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)、點擊安裝即可，只要選擇安裝到指定的項目中即可。一鍵導入很方便有木有

安裝完成

 

 

 

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

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

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

 

 

 

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

 

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

 

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

先將代碼注釋掉

 

然后自己寫上傳到阿里雲的代碼

 

 

//上傳到阿里雲  
using (Stream fileStream = new MemoryStream(uploadFileBytes))//轉成Stream流  
{  
    var fs = Request.Files[UploadConfig.UploadFieldName];  
    string md5 = OssUtils.ComputeContentMd5(fileStream, fs.ContentLength);  
    string today = DateTime.Now.ToString("yyyyMMdd");  
    string FileName = uploadFileName + today + Path.GetExtension(uploadFileName);//文件名=文件名+當前上傳時間  
    string FilePath = "Upload/" + today + "/" + FileName;//雲文件保存路徑  
    try  
    {  
        //初始化阿里雲配置--外網Endpoint、訪問ID、訪問password  
        OssClient aliyun = new OssClient("https://oss-cn-【外網Endpoint區域】.aliyuncs.com", "your Access Key ID", "your Access Key Secret");  
  
        //將文件md5值賦值給meat頭信息，服務器驗證文件MD5  
        var objectMeta = new ObjectMetadata  
        {  
            ContentMd5 = md5,  
        };  
        //文件上傳--空間名、文件保存路徑、文件流、meta頭信息(文件md5) //返回meta頭信息(文件md5)  
        aliyun.PutObject("bucketName", FilePath, fileStream, objectMeta);  
  
        //返回給UEditor的插入編輯器的圖片的src  
        Result.Url = "http://bucketName.oss-cn-【外網Endpoint區域】.aliyuncs.com/" + FilePath;  
        Result.State = UploadState.Success;  
    }  
    catch (Exception e)  
    {  
        Result.State = UploadState.FileAccessError;  
        Result.ErrorMessage = e.Message;  
    }  
    finally  
    {  
        WriteResult();  
    }  
}  

 

上傳功能實現（能上傳但還不能在編輯器中預覽，還需要改造下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");  

 

 

1、這里的 外網Endpoint區域需要自行替換成你創建bucket里面分配的OSS區域，可在bucket概覽中查看

 

2、 Access Key ID和 Access Key Secret需要我們去OSS創建（根據ID和Secret分配不同的權限操作OSS）

 

 

 

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

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

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

 

 

 

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

 

 

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

 

 

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

 

 

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

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

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

 

 

 

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

 

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