.NetCore實現上傳多檔案的樣本詳解

本章和大家分享的是.NetCore的MVC架構上傳檔案的樣本，主要講的內容有：form方式提交上傳，ajax上傳，ajax提交+上傳進度效果，Task平行處理+ajax提交+上傳進度，對大家非常有協助，感興趣的朋友跟隨小編一起學習吧

本章和大家分享的是.NetCore的MVC架構上傳檔案的樣本，主要講的內容有：form方式提交上傳，ajax上傳，ajax提交+上傳進度效果，Task平行處理+ajax提交+上傳進度，相信當你讀完文章內容後能後好的收穫，如果可以不妨點個贊；由於昨天電腦沒電了，快要寫完的內容沒有儲存，今天早上提前來公司從頭開始重新，斷電這情況的確讓人很頭痛啊，不過為了社區的分享環境，這也是值得的，不多說了來進入今天的正篇環節吧；

form方式上傳一組圖片

先來看看咋們html的代碼，這裡先簡單說下要上傳檔案必須要設定form元素裡面的 enctype="multipart/form-data" 屬性和post方式，如果你想要多選上傳檔案的話，需要把檔案type='file'元素設定她的屬性multiple='multiple'，因此就有了如下內容：

<form class="form-horizontal" action="/Home/FileUp" method="post" enctype="multipart/form-data">  <input type="file" name="MyPhoto" class="form-control" multiple />  <br />  <button class="btn btn-default">form上傳</button>  <br />  <span style="color:red">@ViewData["MsgBox"]</span>  </form>

由於採用form提交，這個測試案例只接用了button元素預設的type=submit來提交表單，對應的後台Action中代碼如下：

/// <summary> /// form提交上傳 /// </summary> /// <param name="user"></param> /// <returns></returns> [HttpPost] public async Task<IActionResult> FileUp(MoUser user) {  if (user.MyPhoto == null || user.MyPhoto.Count <= 0) { MsgBox("請上傳圖片。"); return View(); }  //var file = Request.Form.Files;  foreach (var file in user.MyPhoto)  {  var fileName = file.FileName;  var contentType = file.ContentType;  var len = file.Length;  var fileType = new string[] { "image/jpeg", "image/png" };  if (!fileType.Any(b => b.Contains(contentType))) { MsgBox($"只能上傳{string.Join(",", fileType)}格式的圖片。"); return View(); }  if (len > 1024 * 1024 * 4) { MsgBox("上傳圖片大小隻能在4M以下。"); return View(); }  var path = Path.Combine(@"D:\F\學習\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);  using (var stream = System.IO.File.Create(path))  {   await file.CopyToAsync(stream);  }  }  MsgBox($"上傳成功");  return View(); }

從前端到後端的Action不得不說這種form表單提交的方式挺簡單的，需要注意的是Action這裡用的實體模型方式來對應上傳的檔案資訊，這裡自訂了MoUser類，通過屬性 public List<IFormFile> MyPhoto { get; set; } 來匹配html表單中檔案type='file'的name屬性名稱name="MyPhoto"：

public class MoUser { public int UserId { get; set; } = 1; public string UserName { get; set; } = "神牛步行3"; public List<IFormFile> MyPhoto { get; set; } }

這樣就能通過實體模型的方式把上傳的檔案資訊儲存在自訂MoUser類中的MyPhoto屬性中了；

ajax上傳一組圖片

這裡需要在上面例子中的html處修改一些東西，不再使用form提交，指定了普通button按鈕來觸發ajax的提交，完整html代碼如：

<form class="form-horizontal" id="form01" method="post" enctype="multipart/form-data">  <input type="file" name="MyPhoto01" class="form-control" multiple />  <br />  <button type="button" id="btnAjax" class="btn btn-default">ajax上傳</button>  <br />  <span style="color:red" id="span01"></span>  </form>

有了布局，再來看看具體的js實現代碼，這裡我採用jquery的ajax提交的方法來操作，也用到了html5新增的FormData來儲存表單的資料：

$("#btnAjax").on("click", function () {  var msg = $("#span01");  var form = document.getElementById("form01");  //console.log(form);  var data = new FormData(form);  $.ajax({  type: "POST",  url: "/home/AjaxFileUp",  data: data,  contentType: false,  processData: false,  success: function (data) {   if (data) {   msg.html(data.msg);   }  },  error: function () {   msg.html("上傳檔案異常,請稍後重試！");  }  }); });

至於後台Action的方法和樣本一的相差不大，關鍵點在於這裡我直接使用 Request.Form.Files 方式來擷取上傳的所有檔案，不再使用實體模型的方式了，這樣測試案例更多樣化吧：

/// <summary> /// ajax無上傳進度效果上傳 /// </summary> /// <returns></returns> [HttpPost] public async Task<JsonResult> AjaxFileUp() {  var data = new MoData { Msg = "上傳失敗" };  try  {  var files = Request.Form.Files.Where(b => b.Name == "MyPhoto01");  //非空限制  if (files == null || files.Count() <= 0) { data.Msg = "請選擇上傳的檔案。"; return Json(data); }  //格式限制  var allowType = new string[] { "image/jpeg", "image/png" };  if (files.Any(b => !allowType.Contains(b.ContentType)))  {   data.Msg = $"只能上傳{string.Join(",", allowType)}格式的檔案。";   return Json(data);  }  //大小限制  if (files.Sum(b => b.Length) >= 1024 * 1024 * 4)  {   data.Msg = "上傳檔案的總大小隻能在4M以下。"; return Json(data);  }  //寫入伺服器磁碟  foreach (var file in files)  {   var fileName = file.FileName;   var path = Path.Combine(@"D:\F\學習\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);   using (var stream = System.IO.File.Create(path))   {   await file.CopyToAsync(stream);   }  }  data.Msg = "上傳成功";  data.Status = 2;  }  catch (Exception ex)  {  data.Msg = ex.Message;  }  return Json(data); }

如果你有耐心讀到這裡，那麼後面的內容個人感覺對你開發會有好的協助，不負你期待；

ajax提交+上傳進度+一組圖片上傳

同樣我們先來看對應的html代碼，其實和樣本2幾乎一樣，只是把名稱變動了下：

<form class="form-horizontal" id="form02" method="post" enctype="multipart/form-data">  <input type="file" name="MyPhoto02" class="form-control" multiple />  <br />  <button type="button" id="btnAjax02" class="btn btn-default">ajax上傳進度效果上傳</button>  <br />  <span style="color:red" id="span02"></span>  </form>

要加一個進度效果，需要用到js的定時器，定時擷取上傳檔案的上傳進度資料資訊，因此這裡通過js的setInterval方法來定時請求一個進度資料介面，注意用完之後需要清除這個定時器，不然一直再不斷請求您介面：

 $("#btnAjax02").on("click", function () {  var interBar;  var msg = $("#span02");  msg.html("上傳中，請稍後...");  var form = document.getElementById("form02");  //console.log(form);  var data = new FormData(form);  $.ajax({   type: "POST",   url: "/home/AjaxFileUp02",   data: data,   contentType: false,   processData: false,   success: function (data) {   if (data) {    msg.html(data.msg);    //清除進度查詢    if (interBar) { clearInterval(interBar); }   }   },   error: function () {   msg.html("上傳檔案異常,請稍後重試！");   if (interBar) { clearInterval(interBar); }   }  });  //擷取進度  interBar = setInterval(function () {   $.post("/home/ProgresBar02", function (data) {   if (data) {    var isClearVal = true;    var strArr = [];    $.each(data, function (i, item) {    strArr.push('檔案：' + item.fileName + ",當前上傳：" + item.percentBar + '<br/>');    if (item.status != 2) { isClearVal = false; }    });    msg.html(strArr.join(''));    if (isClearVal) {    if (interBar) { clearInterval(interBar); }    }   }   });  }, 200);  });

既然上面說到單獨的進度資料介面，那麼我們除了上傳Action外，也需要進度的Action，而這進度Action得到的上傳檔案資料資訊必須和上傳的Action一直，因此就需要用到緩衝等儲存資料的方式，這裡我用的是MemoryCache的方式，對已netcore來說僅僅只需要在起始檔案（如：Startup.cs）中添加元件服務：

 public void ConfigureServices(IServiceCollection services)  {  // Add framework services.  services.AddMvc();   //添加cache支援  services.AddDistributedMemoryCache(); }

然後通過建構函式注入到對應的介面Controller中去：

  readonly IMemoryCache _cache; public HomeController(IOptions<MoOptions> options, ILogger<HomeController> logger, IMemoryCache cache) {  this._options = options.Value;  _logger = logger;  _cache = cache;  }

到此我們就能利用cache來儲存我們上傳進度資訊了，來看下處理上傳的Action：

private string cacheKey = "UserId_UpFile"; private string cacheKey03 = "UserId_UpFile03"; /// <summary> /// ajax上傳進度效果上傳 /// </summary> /// <returns></returns> [HttpPost] public async Task<JsonResult> AjaxFileUp02() {  var data = new MoData { Msg = "上傳失敗" };  try  {  var files = Request.Form.Files.Where(b => b.Name == "MyPhoto02");  //非空限制  if (files == null || files.Count() <= 0) { data.Msg = "請選擇上傳的檔案。"; return Json(data); }  //格式限制  var allowType = new string[] { "image/jpeg", "image/png" };  if (files.Any(b => !allowType.Contains(b.ContentType)))  {   data.Msg = $"只能上傳{string.Join(",", allowType)}格式的檔案。";   return Json(data);  }  //大小限制  if (files.Sum(b => b.Length) >= 1024 * 1024 * 4)  {   data.Msg = "上傳檔案的總大小隻能在4M以下。"; return Json(data);  }  //初始化上傳多個檔案的Bar，儲存到緩衝中，方便擷取上傳進度  var listBar = new List<MoBar>();  files.ToList().ForEach(b =>  {   listBar.Add(new MoBar   {   FileName = b.FileName,   Status = 1,   CurrBar = 0,   TotalBar = b.Length   });  });  _cache.Set<List<MoBar>>(cacheKey, listBar);  //寫入伺服器磁碟  foreach (var file in files)  {   //總大小   var totalSize = file.Length;   //初始化每次讀取大小   var readSize = 1024L;   var bt = new byte[totalSize > readSize ? readSize : totalSize];   //當前已經讀取的大小   var currentSize = 0L;   var fileName = file.FileName;   var path = Path.Combine(@"D:\F\學習\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);   using (var stream = System.IO.File.Create(path))   {   //await file.CopyToAsync(stream);   //進度條處理流程   using (var inputStream = file.OpenReadStream())   {    //讀取上傳檔案流    while (await inputStream.ReadAsync(bt, 0, bt.Length) > 0)    {    //當前讀取的長度    currentSize += bt.Length;    //寫入上傳流到伺服器檔案中    await stream.WriteAsync(bt, 0, bt.Length);    //擷取每次讀取的大小    readSize = currentSize + readSize <= totalSize ?     readSize :     totalSize - currentSize;    //重新設定    bt = new byte[readSize];    //設定當前上傳的檔案進度，並重新緩衝到進度緩衝中    var bars = _cache.Get<List<MoBar>>(cacheKey);    var currBar = bars.Where(b => b.FileName == fileName).SingleOrDefault();    currBar.CurrBar = currentSize;    currBar.Status = currentSize >= totalSize ? 2 : 1;    _cache.Set<List<MoBar>>(cacheKey, bars);    System.Threading.Thread.Sleep(1000 * 1);    }   }   }  }  data.Msg = "上傳完成";  data.Status = 2;  }  catch (Exception ex)  {  data.Msg = ex.Message;  }  return Json(data); }

代碼一下子就變多了，其實按照邏輯來說增加了儲存進度的Cache，和逐一讀取上傳檔案流的邏輯而已，具體大家可以仔細看下代碼，都有備忘說明；再來就是咋們的進度資訊Action介面：

[HttpPost]  public JsonResult ProgresBar02()  {   var bars = new List<MoBar>();   try   {    bars = _cache.Get<List<MoBar>>(cacheKey);   }   catch (Exception ex)   {   }   return Json(bars);  }

進度介面只需要擷取cache中的進度資訊就行了，註：這裡是測試案例，具體使用情境請各位自行增加其他邏輯代碼；下面就來看下效果：

Task平行處理+ajax提交+上傳進度+一組圖片上傳

這一小節，將會使用Task來處理上傳的檔案，通過上一小節能夠看出，如果你上傳多個檔案，那麼都是按照次序一個一個讀取檔案流來產生上傳檔案到伺服器，這裡改良一下利用Task的特點，就能實現同時讀取不同檔案流了，先來看下html代碼和js代碼:

<form class="form-horizontal" id="form03" method="post" enctype="multipart/form-data">    <input type="file" name="MyPhoto03" class="form-control" multiple />    <br />    <button type="button" id="btnAjax03" class="btn btn-default">task任務處理ajax上傳進度效果上傳</button>    <br />    <span style="color:red" id="span03"></span>   </form>

由於和樣本3的js代碼無差別這裡我直接貼出代碼：

$("#btnAjax03").on("click", function () {   var interBar;   var msg = $("#span03");   msg.html("上傳中，請稍後...");   var form = document.getElementById("form03");   //console.log(form);   var data = new FormData(form);   $.ajax({    type: "POST",    url: "/home/AjaxFileUp03",    data: data,    contentType: false,    processData: false,    success: function (data) {     if (data) {      msg.html(data.msg);      //清除進度查詢      if (interBar) { clearInterval(interBar); }     }    },    error: function () {     msg.html("上傳檔案異常,請稍後重試！");     if (interBar) { clearInterval(interBar); }    }   });   //擷取進度   interBar = setInterval(function () {    $.post("/home/ProgresBar03", function (data) {     if (data) {      var isClearVal = true;      var strArr = [];      $.each(data, function (i, item) {       strArr.push('檔案：' + item.fileName + ",當前上傳：" + item.percentBar + '<br/>');       if (item.status != 2) { isClearVal = false; }      });      msg.html(strArr.join(''));      if (isClearVal) {       if (interBar) { clearInterval(interBar); }      }     }    });   }, 200);  });

關鍵點在後台，通過task數組來儲存每個上傳檔案的處理任務 Task[] tasks = new Task[len]; ，然後使用 Task.WaitAll(tasks); 等待所有上傳任務的完成，這裡特別注意了這裡必須等待，不然會丟失上傳檔案流(多次測試結果)：

/// <summary>  /// ajax上傳進度效果上傳  /// </summary>  /// <returns></returns>  [HttpPost]  public JsonResult AjaxFileUp03()  {   var data = new MoData { Msg = "上傳失敗" };   try   {    var files = Request.Form.Files.Where(b => b.Name == "MyPhoto03");    //非空限制    if (files == null || files.Count() <= 0) { data.Msg = "請選擇上傳的檔案。"; return Json(data); }    //格式限制    var allowType = new string[] { "image/jpeg", "image/png" };    if (files.Any(b => !allowType.Contains(b.ContentType)))    {     data.Msg = $"只能上傳{string.Join(",", allowType)}格式的檔案。";     return Json(data);    }    //大小限制    if (files.Sum(b => b.Length) >= 1024 * 1024 * 4)    {     data.Msg = "上傳檔案的總大小隻能在4M以下。"; return Json(data);    }    //初始化上傳多個檔案的Bar，儲存到緩衝中，方便擷取上傳進度    var listBar = new List<MoBar>();    files.ToList().ForEach(b =>    {     listBar.Add(new MoBar     {      FileName = b.FileName,      Status = 1,      CurrBar = 0,      TotalBar = b.Length     });    });    _cache.Set<List<MoBar>>(cacheKey03, listBar);    var len = files.Count();    Task[] tasks = new Task[len];    //寫入伺服器磁碟    for (int i = 0; i < len; i++)    {     var file = files.Skip(i).Take(1).SingleOrDefault();     tasks[i] = Task.Factory.StartNew((p) =>     {      var item = p as IFormFile;      //總大小      var totalSize = item.Length;      //初始化每次讀取大小      var readSize = 1024L;      var bt = new byte[totalSize > readSize ? readSize : totalSize];      //當前已經讀取的大小      var currentSize = 0L;      var fileName = item.FileName;      var path = Path.Combine(@"D:\F\學習\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);      using (var stream = System.IO.File.Create(path))      {       //進度條處理流程       using (var inputStream = item.OpenReadStream())       {        //讀取上傳檔案流        while (inputStream.Read(bt, 0, bt.Length) > 0)        {         //當前讀取的長度         currentSize += bt.Length;         //寫入上傳流到伺服器檔案中         stream.Write(bt, 0, bt.Length);         //擷取每次讀取的大小         readSize = currentSize + readSize <= totalSize ?           readSize :           totalSize - currentSize;         //重新設定         bt = new byte[readSize];         //設定當前上傳的檔案進度，並重新緩衝到進度緩衝中         var bars = _cache.Get<List<MoBar>>(cacheKey03);         var currBar = bars.Where(b => b.FileName == fileName).SingleOrDefault();         currBar.CurrBar = currentSize;         currBar.Status = currentSize >= totalSize ? 2 : 1;         _cache.Set<List<MoBar>>(cacheKey03, bars);         System.Threading.Thread.Sleep(1000 * 1);        }       }      }     }, file);    }    //任務等待 ，這裡必須等待，不然會丟失上傳檔案流    Task.WaitAll(tasks);    data.Msg = "上傳完成";    data.Status = 2;   }   catch (Exception ex)   {    data.Msg = ex.Message;   }   return Json(data);  }

至於擷取上傳進度的Action也僅僅只是讀取快取資料而已：

[HttpPost]  public JsonResult ProgresBar03()  {   var bars = new List<MoBar>();   try   {    bars = _cache.Get<List<MoBar>>(cacheKey03);   }   catch (Exception ex)   {   }   return Json(bars);  }

這裡再給出上傳進度的實體類：

public class MoData {  /// <summary>  /// 0：失敗 1：上傳中 2:成功  /// </summary>  public int Status { get; set; }  public string Msg { get; set; } } public class MoBar : MoData {  /// <summary>  /// 檔案名稱字  /// </summary>  public string FileName { get; set; }  /// <summary>  /// 當前上傳大小  /// </summary>  public long CurrBar { get; set; }  /// <summary>  /// 總大小  /// </summary>  public long TotalBar { get; set; }  /// <summary>  /// 進度百分比  /// </summary>  public string PercentBar  {   get   {    return $"{(this.CurrBar * 100 / this.TotalBar)}%";   }  } }

到此task任務處理上傳檔案的方式就完成了，咋們來看圖看效果吧：

能夠通過樣本3和4的對比出，沒使用Task和使用的效果區別，這樣效果您值得擁有，耐心讀完本文內容的朋友，沒讓你失望吧，如果可以不妨點個"贊"或掃個碼支援下作者，謝謝；內容最後附上具體測試案例代碼：.NetCore上傳多檔案的幾種樣本