[MVC] WebAPI and Azure Blob Storage Upload - 簡易的將檔案上傳到Azure Blob Storage

因為工作有用到，所以在這裡留下有關於檔案上傳到Azure Blob Storage 的紀錄


1. Azure Storage
先到Azure Storage中 設定完Blob 儲存體後，取得連線字串

然後建立好Blob Container

將連線字串加入WebConfig中

    <add key="FileUploadAzureBlob" value="DefaultEndpointsProtocol=https;AccountName={blob_storage_name};AccountKey**********************;EndpointSuffix=core.windows.net" />

2. 在前端Html 中先建立 類別為file 的 Input  以及 Upload 的按鈕

<input class="col-md-12" id="inputFile" multiple="" name="files[]" type="file" />
<button class="btn btn-success" id="btnUpload" type="button"> Upload </button>

如下所示 :

3. 在JavaScript的區塊中建立 Upload 按鈕的Event

 $(document).on('click', '#btnUpload', function () {
        var files = $('#inputFile')[0].files;

        //FormData 是Html表單中的 <form > 
        //此處我們利用建立表單的方式儲存檔案
        //之後再透過Ajax的方式，將檔案傳遞到 WebApi 或Controller 
        var fileData = new FormData();
        $.each(files, function (i, o) {
            fileData.append(o.name, o);  //將檔案"們" Append 進表單
        });
        

        if (Object.keys(files).length < 1) {
            return;       //若input 中沒有檔案，就不使用Ajax
        } 

    
        $.ajax({
            url: '/AzureApi/Upload/',
            type: "POST",
            contentType: false, // 不設定任何的 Content Header
            processData: false, // 不進行資料轉換的步驟
            data: fileData,     //將檔案放進body中
            success: function (result) {
                alert('檔案上傳成功');
            }
        });
    });

4. WebApi的建立
這裡會使用到 WindowsAzure.Storage 的Nuget 套件
著手紀錄的時候最新版本為 9.3.2，未來有更新的版本還是建議使用新的版本
請參照 : NuGet Gallery

using Microsoft.WindowsAzure.Storage;            //引用
using Microsoft.WindowsAzure.Storage.Blob;       //引用

namespace TASSWeb.Controllers.Api
{

    public class AzureApiController : BaseApiController
    {

        [HttpPost]
        [Route("AzureApi/Upload/")]       
        public async Task PostUpload()
        {
            //FormData Setting 
            var provider = new MultipartMemoryStreamProvider();
            await Request.Content.ReadAsMultipartAsync(provider);   //將檔案放進provider內

            //Connection String , and Azure Blob Container 
            string sConnStr = System.Configuration.ConfigurationManager.AppSettings["FileUploadAzureBlob"].ToString();
            string sContainer = "filupload"; //需要為小寫英文字母

            //建立與Storage的連線以及認證
            CloudStorageAccount storageAccount = CloudStorageAccount.Parse(sConnStr);

            //連接到Blob Client
            CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

           //使用GetBlockBlobReference去取得 CloudBlockBlob 物件的參考
            CloudBlockBlob blockBlob = container.GetBlockBlobReference(guFileID.ToString());

           //將provider內的資料轉為Stream
           Stream filestream = await provider.Files[0].ReadAsStreamAsync();

            //檢查容器是否存在，不存在則建立
            container.CreateIfNotExists();
            try
            {
                //使用UploadFromStream 將Stream的檔案上傳至Azure Blob Storage 中的Container
                //UploadFromStream  或是 UploadFromStreamAsync 這兩種方法 都會已覆蓋的方式上傳檔案
                blockBlob.UploadFromStream(filestream);
            }
            catch (Exception ex){
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex.Message);
            }
            return Request.CreateResponse(HttpStatusCode.OK);
        }
    }
}