循序漸進學.Net Core Web Api開發系列【5】：檔案上傳
阿新 • • 發佈：2018-12-29
系列目錄
一、概述
本篇介紹通過.NET core WebApi實現檔案上傳。
二、Controller端程式碼
直接上程式碼：
[Route("api/files")] [Produces("application/json")] public class FileController : Controller { private readonly IHostingEnvironment _hostingEnvironment; public FileController(IHostingEnvironment hostingEnvironment) { _hostingEnvironment= hostingEnvironment; } [HttpPost("iform")] public ResultObject UploadIForm(List<IFormFile> files) { List<String> filenames = new List<string>(); foreach (var file in files) { var fileName = file.FileName; Console.WriteLine(fileName); fileName= $"/UploadFile/{fileName}"; filenames.Add(fileName); fileName = _hostingEnvironment.WebRootPath + fileName; using (FileStream fs = System.IO.File.Create(fileName)) { file.CopyTo(fs); fs.Flush(); } }return new ResultObject { state = "Success", resultObject = filenames }; }
為了同時返回上傳的檔名和操作狀態，我們定義了一個ResultObject的類來返回資訊。
public class ResultObject { public String state { get; set; } public Object resultObject { get; set; } }
返回上傳的檔名稱列表的目的是因為後臺可能會給檔案重新命名，以避免衝突，新的檔名稱需要讓前臺知道。
後臺的files是通過傳入的引數獲得的，還有其他兩種方法可以獲取到檔案，效果一樣：
[HttpPost] public ResultObject UploadAjax() { var files = Request.Form.Files; ... }
或：
public ResultObject UploadForm(IFormCollection form) { var files = form.Files; ... }
除了獲取到files的方式不同，其他操作完全一致。
三、前端程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/jquery-form/dist/jquery.form.min.js"></script>
<script type="text/javascript">
function AjaxFormDataUploadfile() {
var fileUpload = $("#files").get(0);
var files = fileUpload.files;
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append("files", files[i]);
}
$.ajax({
type: "POST",
url: "/api/files/iform",
contentType: false,
processData: false,
data: data,
success: function (message) {
alert("success");
},
error: function () {
alert("上傳檔案出現錯誤！");
}
});
} </script>
</head>
<body>
<form id="myform" method="post" action="/api/files/iform" enctype="multipart/form-data">
<input type="file" id="files" name="files" multiple /> <br /><br />
<input id="formupload" type="button" value="Form Data Upload" onclick="AjaxFormDataUploadfile();" /><br /><br />
</form>
</body>
</html>
兩個注意點：
1、form要提供enctype="multipart/form-data" 屬性
2、如果要上傳多個檔案，檔案表單需要提供multiple屬性
這裡我們通過FormData物件的append操作來構建提交的資料，根據我上一篇部落格提到的，這裡提交資料還有其他兩個辦法：
function formuploadfile() { $("#myform").ajaxSubmit(); }
或者：
function Ajaxuploadfile() { var formdata = new FormData(document.getElementById("myform")); $.ajax({ type: "POST", url: "/api/files/iform", contentType: false, processData: false, data: formdata, success: function (result) { alert("success"); $.each(result.resultObject, function (i, filename) { alert(filename); }); }, error: function () { alert("上傳檔案出現錯誤！"); } }); }
具體選擇哪種方式，要看前端的需求，個人認為 var formdata = new FormData(document.getElementById("myform")); 比較方便。
四、上傳大檔案
上傳大檔案和上傳小檔案程式碼是一樣的，關鍵是上傳大檔案時間太長，需要前端提供進度報告，不然使用者體驗太差。
解決的方案是利用ajax的HXR物件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/jquery-form/dist/jquery.form.min.js"></script>
<script type="text/javascript">
function AjaxuploadfileWithprogress() {
var formdata = new FormData(document.getElementById("myform"));
$.ajax({
type: "POST",
url: "/api/files/iform",
contentType: false,
processData: false,
data: formdata,
success: function (result) {
alert("success");
$.each(result.resultObject, function (i, filename) {
alert(filename);
});
},
error: function () {
alert("上傳檔案出現錯誤！");
},
xhr: function () {
var xhr = $.ajaxSettings.xhr();
if (onprogress && xhr.upload) {
xhr.upload.addEventListener("progress", onprogress, false);
return xhr;
}
}
});
}
function onprogress(evt)
{
var loaded = evt.loaded; //已經上傳大小
var tot = evt.total; //附件總大小
var per = Math.floor(100 * loaded / tot); //百分比
$("#son").html(per + "%");
$("#son").css("width", per + "%");
}
</script>
<style type="text/css">
#parent {
width: 550px;
height: 10px;
border: 2px solid #09F;
}
#son {
width: 0;
height: 100%;
background-color: #09F;
text-align: center;
line-height: 10px;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<form id="myform" method="post" action="/api/files/iform" enctype="multipart/form-data">
<div>
<div>
<br />
<p>表單多個上傳檔案:</p><br />
<input type="file" id="files" name="files" multiple /> <br /><br />
<input id="formuploadprogress" type="button" value="Ajax Upload Progress" onclick="AjaxuploadfileWithprogress();" /><br /><br />
<div id="parent">
<div id="son"></div>
</div>
</div>
</div>
</form>
</body>
</html>
此時，可以看到上傳進度條了，可以選擇一個大檔案測試一下。或者把瀏覽器的傳輸速度調低也可以進行除錯。
五、為Swagger提供檔案上傳除錯功能支援
目前swagger是不支援List<IFormFile>型別的，為了方便除錯，我們為swagger提供該型別的支撐。
新增類：
public class SwaggerFileUploadListFilter : IOperationFilter { public void Apply(Operation operation, OperationFilterContext context) { if (!context.ApiDescription.HttpMethod.Equals("POST", StringComparison.OrdinalIgnoreCase) && !context.ApiDescription.HttpMethod.Equals("PUT", StringComparison.OrdinalIgnoreCase)) { return; } var fileParameters = context.ApiDescription.ActionDescriptor.Parameters.Where(n => n.ParameterType == typeof(List<IFormFile>)).ToList(); if (fileParameters.Count < 0) { return; } operation.Consumes.Add("multipart/form-data");
foreach (var fileParameter in fileParameters) { var parameter = operation.Parameters.Single(n => n.Name == fileParameter.Name); operation.Parameters.Remove(parameter); NonBodyParameter p = new NonBodyParameter { Name = parameter.Name, In = "formData", Description = parameter.Description, Required = parameter.Required, Type = "file" }; operation.Parameters.Add(p); } } }
在Startup類的ConfigureServices方法裡註冊該過濾器：
public void ConfigureServices(IServiceCollection services) { services.AddMvc(); services.AddCors(); services.AddSwaggerGen(option => { option.SwaggerDoc("v1", new Info { Version = "v1", Title = "SaleService介面文件", Description = "RESTful API for SaleService.", TermsOfService = "None", Contact = new Contact { Name = "seabluescn", Email = "[email protected]", Url = "" } }); option.OperationFilter<SwaggerFileUploadListFilter>(); //Set the comments path for the swagger json and ui. var basePath = PlatformServices.Default.Application.ApplicationBasePath; var xmlPath = Path.Combine(basePath, "SaleService.xml"); option.IncludeXmlComments(xmlPath); }); }
此時可以通過swagger選擇檔案了
但有個缺點是隻能上傳一個檔案，如何實現可以選擇多個檔案還不會搞。