當下.Net Core專案可是如雨後春筍一般發展起來，作為.Net大軍中的一員，我熱忱地擁抱了.Net Core並且積極使用其進行業務的開發，我們先介紹下.Net Core專案下實現檔案上傳下載介面。

一、開發環境

毋庸置疑，宇宙第一IDE VisualStudio 2017

二、專案結構

FilesController 檔案上傳下載控制器

PictureController 圖片上傳下載控制器

Return_Helper_DG 返回值幫助類

三、關鍵程式碼

1、首先我們來看Startup.cs 這個是我們的程式啟動配置類，在這裡我們進行一系列的配置。

跨域配置：

當然跨域少不了dll的引用，我們使用Nuget引用相關的引用包

 伺服器資源路徑置換，這樣可以防止客戶端猜測服務端檔案路徑，製造一個虛擬的隱射進行訪問，提高了安全性。

Startup.cs的完整程式碼如下：

 1 using Microsoft.AspNetCore.Builder;
 2 using Microsoft.AspNetCore.Hosting;
 3 using Microsoft.AspNetCore.Http;
 4 using Microsoft.Extensions.Configuration;
 5 using Microsoft.Extensions.DependencyInjection;
 6
 
 using Microsoft.Extensions.FileProviders;
 7 using Microsoft.Extensions.Logging;
 8 using System.IO;
 9 
10 namespace QX_Core.FilesCenter
11 {
12     public class Startup
13     {
14         public Startup(IHostingEnvironment env)
15         {
16             var builder = new ConfigurationBuilder()
17
 
                 .SetBasePath(env.ContentRootPath)
18                 .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
19                 .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
20                 .AddEnvironmentVariables();
21             Configuration = builder.Build();
22         }
23 
24         public IConfigurationRoot Configuration { get; }
25 
26         // This method gets called by the runtime. Use this method to add services to the container.
27         public void ConfigureServices(IServiceCollection services)
28         {
29             // Add framework services.
30             services.AddMvc();
31             #region CORS
32             services.AddCors(options =>
33             {
34                 options.AddPolicy("AllowSpecificOrigin",
35                     builder => builder.WithOrigins("http://localhost:3997").AllowAnyHeader().AllowAnyOrigin().AllowAnyMethod());
36             });
37             #endregion
38         }
39 
40         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
41         public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
42         {
43             //loggerFactory.AddConsole(Configuration.GetSection("Logging"));
44             //loggerFactory.AddDebug();
45 
46             app.UseMvc();
47             // Shows UseCors with named policy.
48             app.UseCors("AllowSpecificOrigin");
49 
50             app.UseStaticFiles(new StaticFileOptions()
51             {
52                 FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot/Files")),
53                 RequestPath = new PathString("/src")
54             });
55         }
56     }
57 }

2、Return_Helper_DG類使用者設定一個統一的返回值反饋到客戶端
Return_Helper_DG類的程式碼如下：

 1 using System.Net;
 2 /**
 3 * author:qixiao
 4 * create:2017-5-19 15:15:05
 5 * */
 6 namespace QX_Core.FilesCenter.QX_Core.Helper
 7 {
 8     public abstract class Return_Helper_DG
 9     {
10         public static object IsSuccess_Msg_Data_HttpCode(bool isSuccess, string msg, dynamic data, HttpStatusCode httpCode = HttpStatusCode.OK)
11         {
12             return new { isSuccess = isSuccess, msg = msg, httpCode = httpCode, data = data };
13         }
14         public static object Success_Msg_Data_DCount_HttpCode(string msg, dynamic data = null, int dataCount = 0, HttpStatusCode httpCode = HttpStatusCode.OK)
15         {
16             return new { isSuccess = true, msg = msg, httpCode = httpCode, data = data, dataCount = dataCount };
17         }
18         public static object Error_Msg_Ecode_Elevel_HttpCode(string msg, int errorCode = 0, int errorLevel = 0, HttpStatusCode httpCode = HttpStatusCode.InternalServerError)
19         {
20             return new { isSuccess = false, msg = msg, httpCode = httpCode, errorCode = errorCode, errorLevel = errorLevel };
21         }
22     }
23 }

3、FilesController是我們的檔案上傳控制器介面，這裡定義了對上傳的檔案的接收操作，並且在控制器上啟用跨域配置

 1 using Microsoft.AspNetCore.Cors;
 2 using Microsoft.AspNetCore.Hosting;
 3 using Microsoft.AspNetCore.Mvc;
 4 using Microsoft.Net.Http.Headers;
 5 using QX_Core.FilesCenter.QX_Core.Helper;
 6 using System;
 7 using System.Collections.Generic;
 8 using System.IO;
 9 using System.Linq;
10 
11 namespace QX_Core.FilesCenter.Controllers
12 {
13     //[Produces("application/json")]
14     [Route("api/[controller]")]
15     [EnableCors("AllowSpecificOrigin")]
16     public class FilesController : Controller
17     {
18         private IHostingEnvironment hostingEnv;
19 
20         public FilesController(IHostingEnvironment env)
21         {
22             this.hostingEnv = env;
23         }
24 
25         [HttpPost]
26         public IActionResult Post()
27         {
28             var files = Request.Form.Files;
29             long size = files.Sum(f => f.Length);
30 
31             //size > 100MB refuse upload !
32             if (size > 104857600)
33             {
34                 return Json(Return_Helper_DG.Error_Msg_Ecode_Elevel_HttpCode("files total size > 100MB , server refused !"));
35             }
36 
37             List<string> filePathResultList = new List<string>();
38 
39             foreach (var file in files)
40             {
41                 var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
42 
43                 string filePath = hostingEnv.WebRootPath + $@"\Files\Files\";
44 
45                 if (!Directory.Exists(filePath))
46                 {
47                     Directory.CreateDirectory(filePath);
48                 }
49 
50                 fileName = Guid.NewGuid() + "." + fileName.Split('.')[1];
51 
52                 string fileFullName = filePath + fileName;
53 
54                 using (FileStream fs = System.IO.File.Create(fileFullName))
55                 {
56                     file.CopyTo(fs);
57                     fs.Flush();
58                 }
59                 filePathResultList.Add($"/src/Files/{fileName}");
60             }
61 
62             string message = $"{files.Count} file(s) /{size} bytes uploaded successfully!";
63 
64             return Json(Return_Helper_DG.Success_Msg_Data_DCount_HttpCode(message, filePathResultList, filePathResultList.Count));
65         }
66 
67     }
68 }

在上述的程式碼中，我們對上傳的檔案的大小進行了限制，並且對檔案的大小進行反饋。

4、PictureController 圖片上傳控制器介面，類似於檔案，不過對上傳的圖片型別進行了校驗和限制

 1 using Microsoft.AspNetCore.Cors;
 2 using Microsoft.AspNetCore.Hosting;
 3 using Microsoft.AspNetCore.Mvc;
 4 using Microsoft.Net.Http.Headers;
 5 using QX_Core.FilesCenter.QX_Core.Helper;
 6 using System;
 7 using System.Collections.Generic;
 8 using System.IO;
 9 using System.Linq;
10 
11 namespace QX_Core.FilesCenter.Controllers
12 {
13     //[Produces("application/json")]
14     [Route("api/[controller]")]
15     [EnableCors("AllowSpecificOrigin")]
16     public class PicturesController : Controller
17     {
18         private IHostingEnvironment hostingEnv;
19 
20         string[] pictureFormatArray = { "png", "jpg", "jpeg", "bmp", "gif","ico", "PNG", "JPG", "JPEG", "BMP", "GIF","ICO" };
21 
22         public PicturesController(IHostingEnvironment env)
23         {
24             this.hostingEnv = env;
25         }
26 
27         [HttpPost]
28         public IActionResult Post()
29         {
30             var files = Request.Form.Files;
31             long size = files.Sum(f => f.Length);
32 
33             //size > 100MB refuse upload !
34             if (size > 104857600)
35             {
36                 return Json(Return_Helper_DG.Error_Msg_Ecode_Elevel_HttpCode("pictures total size > 100MB , server refused !"));
37             }
38 
39             List<string> filePathResultList = new List<string>();
40 
41             foreach (var file in files)
42             {
43                 var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
44 
45                 string filePath = hostingEnv.WebRootPath + $@"\Files\Pictures\";
46 
47                 if (!Directory.Exists(filePath))
48                 {
49                     Directory.CreateDirectory(filePath);
50                 }
51 
52                 string suffix = fileName.Split('.')[1];
53 
54                 if (!pictureFormatArray.Contains(suffix))
55                 {
56                     return Json(Return_Helper_DG.Error_Msg_Ecode_Elevel_HttpCode("the picture format not support ! you must upload files that suffix like 'png','jpg','jpeg','bmp','gif','ico'."));
57                 }
58 
59                 fileName = Guid.NewGuid() + "." + suffix;
60 
61                 string fileFullName = filePath + fileName;
62 
63                 using (FileStream fs = System.IO.File.Create(fileFullName))
64                 {
65                     file.CopyTo(fs);
66                     fs.Flush();
67                 }
68                 filePathResultList.Add($"/src/Pictures/{fileName}");
69             }
70 
71             string message = $"{files.Count} file(s) /{size} bytes uploaded successfully!";
72 
73             return Json(Return_Helper_DG.Success_Msg_Data_DCount_HttpCode(message, filePathResultList, filePathResultList.Count));
74         }
75 
76     }
77 }

到此，我們的檔案圖片上傳程式碼已經全部完成，下面我們對檔案上傳的客戶端進行實現

四、客戶端的實現

 客戶端我們很簡單地用jQuery Ajax的方式進行圖片檔案的提交，客戶端程式碼的實現：

 1 <!doctype>
 2 
 3 <head>
 4     <script src="jquery-3.2.0.min.js"></script>
 5     <script>
 6         $(document).ready(function () {
 7             var appDomain = "http://localhost:53972/";
 8             $("#btn_fileUpload").click(function () {
 9                                 var fileUpload = $("#files").get(0);
10                 var files = fileUpload.files;
11                 var data = new FormData();
12                 for (var i = 0; i < files.length; i++) {
13                       data.append(files[i].name, files[i]);
14                 }
15                 $.ajax({
16                     type: "POST",
17                     url: appDomain+'api/Pictures',
18                     contentType: false,
19                     processData: false,
20                     data: data,
21                     success: function (data) {
22                         console.log(JSON.stringify(data));
23                     },
24                     error: function () {
25                         console.log(JSON.stringify(data));
26                     }
27                 });
28             });
29             //end click
30 
31 
32         })
33     </script>
34 </head>
35 <title></title>
36 
37 <body>
38     <article>
39         <header>
40             <h2>article-form</h2>
41         </header>
42         <p>
43             <form id="uploadForm" enctype="multipart/form-data">
44                 <input type="file" id="files" name="files" placeholder="file" multiple>file-multiple屬性可以選擇多項<br><br>
45                 <input type="button" id="btn_fileUpload" value="fileUpload">
46             </form>
47         </p>
48     </article>
49 </body>

五、程式碼測試

1.啟動伺服器

我們可以看到一個控制檯和一個web自動啟動，並且web顯示預設的Values控制器的請求返回值。

2.圖片上傳

我們使用ajax的方式進行圖片的上傳操作，開啟測試web頁面，並且選擇圖片，點選上傳，檢視控制檯返回的結果：

可以看到，一張圖片上傳成功！

 輸入返回的地址，我們可以看到成功訪問到了圖片，特別注意這裡伺服器路徑的改變：

多圖片上傳：

可見，多圖片上傳沒有任何問題！

同樣進行檔案上傳的測試：

同樣，檔案上傳也沒有任何問題！

六、總結

至此，我們已經實現了預期的.Net Core圖片檔案上傳的全部功能！