當下.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圖片文件上傳的全部功能！