0%

ASP.NET MVC x CKEditor 檔案上傳至 Azure Storage

Posted on Edited on In

前言

上一篇已經教大家如何使用 ASP.NET 搭配 CKEditor 了，這一篇主要是要介紹如何使用 CKEditor 圖文上傳至
Azure Storage 上。由於這個專案是要放在雲端上面，因此檔案必須也要照雲端的規範走。

操作步驟

Step1:

首先需要設定 CKEditor 的 filebrowserImageUploadUrl ，指定上傳檔案的路徑，才能使用圖文上傳功能。

1
2
3
<script type="text/javascript">
    CKEDITOR.replace('Content', { filebrowserImageUploadUrl: '/Upload/UploadPicture' });
</script>

Step2:

因此我們必須要在 Controller 寫一個 Action 來接收上傳的檔案。這裡我使用 Azure Storage 來當作檔案
上傳的空間。
1.引用 Azure Storage SDK

1
2
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;

2.取得 Azure Storage 的 AccountName 與 AccountKey，並在 Web.config 設定你的 StorageConnectionString，方便日後管控與存取。

1
<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=用戶名稱;AccountKey=用戶key" />

3.撰寫 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
34
35
36
37
38
39
40
[HttpPost]
public ActionResult UploadPicture(HttpPostedFileBase upload, string CKEditorFuncNum, string CKEditor, string langCode)
{
    string result = "";
    if (upload != null && upload.ContentLength > 0)
    {
        string storageConnectionString = ConfigurationManager.AppSettings["StorageConnectionString"];

        //取得 storage 帳號
        CloudStorageAccount storageAccount = CloudStorageAccount.Parse(storageConnectionString);
        //建立 blob client
        CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

        //取得 container
        CloudBlobContainer container = blobClient.GetContainerReference("upload");
        //如果沒有 container 則會建立
        container.CreateIfNotExists();
        
        //設定 container 的 permissions 為共用的(可讀寫)
        var perm = new BlobContainerPermissions();
        perm.PublicAccess = BlobContainerPublicAccessType.Blob;
        container.SetPermissions(perm);

        //取得 Blob
        CloudBlockBlob blockBlob = container.GetBlockBlobReference(upload.FileName);
        //設定 Blob 的 ContentType
        blockBlob.Properties.ContentType = "image/jpg";
        //透過 Blob 上傳檔案
        blockBlob.UploadFromStream(upload.InputStream);
        //取得上傳檔案的 Url
        string imageUrl = blockBlob.Uri.AbsoluteUri;
        var vMessage = string.Empty;

        //回傳給 CKEditor 做顯示
        result = @"<html><body><script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + imageUrl + "\", \"" + vMessage + "\");</script></body></html>";

    }

    return Content(result);
}

參考連結:

1.官方文件
2.https://dotblogs-testslot.azurewebsites.net/maduka/2015/12/25/171754