Angular + Asp.net MVC 多檔上傳

自從Html5 增加file的功能後，檔案上傳的功能簡化不少，剛好有案子正好需要上傳圖片，所以可以示範如何在Angular 上傳檔案後，再經由MVC後端接收圖片的教學，最後又透過Angular的特殊功能，把多張圖片展示在列表上。

一、HTML5 的語法

瀏覽器已經將上傳檔案的功能內建化，所以讓後端處理細節簡化不少，

加上multiple 允許多個檔案上傳，預設只能單檔上傳，所以multiple 屬性要加上

<input type="file" name="multipleFiles" multiple />

二、Angular的語法

傳統的網頁是經由post把網頁內的form 資訊往server後端傳遞，但是

Ajax已經是網頁必備的功能，只將部份訊息往後端傳遞，所以angular中宣告formData變數就是要把前端的訊息集中起來，再呼叫$http.post把formData 送給asp.net MVC 的controller

Angular 有很多參數和函數，作者沒有深入研究，因為$http.post是非常方便的工具，$http 是Angular和遠端http Server 溝通的核心

var formData = new FormData();//傳送到後端的資訊       //上傳多張圖片                 $.each($("input[name='multipleFiles']"), function (i, obj) {                     $.each(obj.files, function (j, file) {                                                formData.append('photo[' + j + ']', file);  //以陣列方式傳遞多檔圖片或檔案                     })                 });         $http.post(‘../Test/AddReleaseBug’, formData, {    headers: { 'Content-Type': undefined }  }).then(function (res) {  alert("儲存成功"); }));

  

三、Asp.net MVC

Asp.net MVC為了要接收來自前端的上傳的圖片，所以宣告

HttpPostedFileBase陣列的型態去接收檔案，就可以接收多個檔案，為了隔離網頁的呈現層(asp.net mvc)和企業邏輯，所以增加實體層entityTest 負責資料DB的取得，如果網頁架構較大時，可以增加控制層，負責更細節的邏輯控制，再由控制層再呼叫實體層，這就是早期的三層式架構(MVC)模式。

Asp.net Controller

[HttpPost]         public async Task<bool> AddReleaseBug( IEnumerable<HttpPostedFileBase>[] photo)         {                      string path = "bugFile";             string strMultiFiles = "";                     if (photo != null)                 {                     foreach (IEnumerable<HttpPostedFileBase> uploadImage in photo)                     {                         strMultiFiles += await entityTestObj.fileUpload(uploadImage, path) + ",";                     }                     strMultiFiles = strMultiFiles.Substring(0, strMultiFiles.Length - 1);                 }         }

實體層:

FileUpload 負責把檔案儲存到指定的路徑中，並把檔名回傳

public async Task<string> fileUpload(IEnumerable<HttpPostedFileBase> addDownloadFile, string path)         {             try             {                 var fileName = "";                 var httpPath = HttpContext.Current.Server.MapPath("~/" + path);                 Directory.CreateDirectory(httpPath); //路徑不存在自已建立                 if (addDownloadFile.Count() > 0)                 {                     foreach (HttpPostedFileBase file in addDownloadFile)                     {                         fileName += Path.GetFileName(file.FileName) + ",";                         var pathFileName = Path.Combine(httpPath, file.FileName);                         file.SaveAs(pathFileName);                     }                     fileName = fileName.Substring(0, fileName.Length - 1);                                   }                 return fileName;             }             catch (Exception ex)             {                 writeObj.writeToFile("ManageFileVersion_" + DateTime.Now.ToString("yyyyMMdd"), HttpContext.Current.Server.MapPath("~"), "fileUpload error: " + ex.Message);                 throw new Exception(ex.Message);             } }

示範: photo陣列集中共有3個檔案上傳

四、Angular如何split(“,”)

有點偏離主題，因為延續多檔上傳的功能，我將多檔案名稱儲存在同一欄位

中，並以『，』隔離，所以如果要在前端呈現多個圖片時，要以逗號隔離，但是Angular 有支援split的功能，所以這是一個好用的工具喔。

<font color="blue">圖片</font>:<br /> <a href="~/bugFile/{{::bug.bugDocumentFile.split(',')[0] }}" arget="_blank">{{::bug.bugDocumentFile.split(',')[0] }}</a> <a href="~/bugFile/{{::bug.bugDocumentFile.split(',')[1] }}" arget="_blank">{{::bug.bugDocumentFile.split(',')[1] }}</a> <a href="~/bugFile/{{::bug.bugDocumentFile.split(',')[2] }}" arget="_blank">{{::bug.bugDocumentFile.split(',')[2] }}</a> <a href="~/bugFile/{{::bug.bugDocumentFile.split(',')[3] }}" arget="_blank">{{::bug.bugDocumentFile.split(',')[3] }}</a> <a href="~/bugFile/{{::bug.bugDocumentFile.split(',')[4] }}" arget="_blank">{{::bug.bugDocumentFile.split(',')[4] }}</a>

如果以上有更好的建議的話，歡迎多多留言，希望在這共同的平台上面，大

家可以共同教學相長。

五、文獻參考

1.    https://docs.angularjs.org/api/ng/service/$http