【導(dǎo)讀】最近因維護(hù).NET和.NET Core項(xiàng)目用到文件上傳功能，雖說也做過，但是沒做過什么對(duì)比，借此將二者利用Ajax通過FormData上傳文件做一個(gè)總結(jié)，通過視圖提交表單太簡單，這里不做闡述，希望對(duì)有需要的童鞋能有力所能及的幫助。

.NET Web APi FormData文件上傳

我們將參數(shù)和文件都通過FormData來上傳，給出如下HTML代碼

?<div?class="form-horizontal"?style="margin-top:80px;"><div?class="form-group"><label?class="control-label?col-md-2"?for="caption">標(biāo)題</label><div?class="col-md-10"><input?name="title"?id="title"?type="text"?/></div></div><div?class="form-group"><label?class="control-label?col-md-2"?for="caption">文件</label><div?class="col-md-10"><input?name="file"?id="file"?multiple?type="file"?/></div></div><div?class="form-group"><div?class="col-md-offset-2?col-md-10"><input?type="submit"?id="btn"?value="提交"?class="btn?btn-success"?/></div></div> </div>

恕我有點(diǎn)強(qiáng)迫癥，界面好看點(diǎn)，看著也舒服，接下來則是腳本自然不用多說，利用FormData上傳文件網(wǎng)上一搜遍地都是

?$(function?()?{$('#btn').click(function?()?{var?data?=?new?FormData();var?title?=?$('#title').val();data.append("title",?title);var?files?=?$('#file')[0].files;;for?(var?i?=?0;?i?<?files.length;?i++)?{data.append("file",?files[i]);}$.ajax({url:?'/api/upload/upload',type:?"post",cache:?false,contentType:?false,processData:?false,data:?data,});}); });

不過需要注意的是，對(duì)現(xiàn)代大多瀏覽器都都已支持將上述contentType設(shè)置為false后，就是在請(qǐng)求頭中添加multipart/form-data，若是老版本瀏覽器則需要在請(qǐng)求頭中手動(dòng)添加表單多文件上傳標(biāo)識(shí)，如下

beforeSend:?function?(request)?{request.setRequestHeader("Content-Type",?"multipart/form-data;?boundary="?+?data.boundary); }

前端我們已經(jīng)搞完，接下來我們回到后臺(tái)，.NET Web APi已提供專門讀取FormData數(shù)據(jù)的APi，如下：

//檢查請(qǐng)求是否包含multipart/form-data. if?(!Request.Content.IsMimeMultipartContent()) {throw?new?HttpResponseException(HttpStatusCode.UnsupportedMediaType); }//將文件存儲(chǔ)到App_Data文件夾下 var?root?=?HttpContext.Current.Server.MapPath("~/App_Data");//實(shí)例化MultipartFormDat流 var?provider?=?new?MultipartFormDataStreamProvider(root);//?讀取表單數(shù)據(jù) await?Request.Content.ReadAsMultipartAsync(provider);

若上傳2個(gè)文件，此時(shí)上傳App_Data目錄下的文件，如下這般

?若要讀取提交的表單參數(shù)，我們?nèi)缦芦@取

//獲取表單參數(shù)數(shù)據(jù) var?formData?=?provider.FormData;

那么我們?cè)趺磳⑸鲜鲱愃婆R時(shí)文件數(shù)據(jù)轉(zhuǎn)換為我們上傳的文件數(shù)據(jù)呢？我們只需將上述文件名轉(zhuǎn)換我們上傳的文件名或者其他自定義文件名稱即可，如下：

//?獲取文件數(shù)據(jù) foreach?(MultipartFileData?file?in?provider.FileData) {string?fileName?=?file.Headers.ContentDisposition.FileName;if?(fileName.StartsWith("\"")?&&?fileName.EndsWith("\"")){fileName?=?fileName.Trim('"');}if?(fileName.Contains(@"/")?||?fileName.Contains(@"\")){fileName?=?Path.GetFileName(fileName);}//將本地文件轉(zhuǎn)換為實(shí)際所需文件File.Move(file.LocalFileName,?Path.Combine(root,?fileName)); }

當(dāng)然除了通過上述流讀取表單相關(guān)數(shù)據(jù)外，.NET Web APi還提供了內(nèi)存表單流，只是利用此流時(shí)，表單參數(shù)和文件放置在一起，我們需要通過文件相關(guān)參數(shù)來做區(qū)分，然后分別獲取文件和表單參數(shù)，如下：

var?provider?=?new?MultipartMemoryStreamProvider();await?Request.Content.ReadAsMultipartAsync(provider);var?formData?=?new?NameValueCollection();foreach?(var?httpContent?in?provider.Contents) {var?formFileName?=?httpContent.Headers.ContentDisposition?.FileName?.Trim('\"');var?formContentType?=?httpContent.Headers?.ContentType?.ToString();if?(!string.IsNullOrEmpty(formFileName)?&&?!string.IsNullOrEmpty(formContentType)){//文件數(shù)據(jù)using?(var?fileStream?=?new?FileStream(root,?FileMode.Create)){await?httpContent.CopyToAsync(fileStream);}}else{//表單參數(shù)var?formFieldName?=?httpContent.Headers.ContentDisposition.Name;var?formFieldValue?=?await?httpContent.ReadAsStringAsync();formData.Add(formFieldName,?formFieldValue);} }

.NET Core Web APi FormData文件上傳

HTML和腳本在上述已經(jīng)提供，這里我們只需關(guān)注APi獲取即可。在.NET Core中沒有專門提供獲取FormData數(shù)據(jù)的APi，那么我們是如何獲取的呢?找了找網(wǎng)上資料，發(fā)現(xiàn)大部分是來自廣告網(wǎng)站CSDN，不過這些文章都是轉(zhuǎn)載的博客園，都是如下這樣獲取

[Route("api/[controller]/[action]")] [ApiController] public?class?UploadController?:?ControllerBase {public?IActionResult?Upload(){var?files?=?Request.Form.Files;return?Ok();} }

如上也沒問題，我能說你這思路還停留在.NET Web APi嗎，啥年代了，還通過請(qǐng)求上下文去獲取，.NET Core靈活綁定機(jī)制使用起來它不香嗎，通過如下直接綁定豈不完事

此時(shí)有的童鞋又有疑問了，上傳不僅僅包括文件還包括參數(shù)，比如上述還有標(biāo)題，那該如何是好，.NET Core的強(qiáng)類型綁定機(jī)制它不香嗎，如下定義強(qiáng)類型：

public?class?ExampleUpload {public?string?Title?{?get;?set;?}public?List<IFormFile>?Files?{?get;?set;?} }

注意：綁定參數(shù)時(shí)一定要使用[FromForm]，否則將出現(xiàn)請(qǐng)求415，同時(shí)也要將前端Ajax FormData文件的參數(shù)名和強(qiáng)類型參數(shù)名一致。

[Route("api/[controller]/[action]")] [ApiController] public?class?UploadController?:?ControllerBase {public?IActionResult?Upload([FromForm]ExampleUpload?example){return?Ok();} }

主要發(fā)現(xiàn)網(wǎng)上一部分資料對(duì)于利用FormData上傳文件在利用.NET Core接收參數(shù)時(shí)姿勢(shì)不是很正確，故而才有此文，在.NET Core中參數(shù)的綁定已完全不需要借助請(qǐng)求上下文來獲取，其綁定機(jī)制靈活且強(qiáng)大

總結(jié)

以上是生活随笔為你收集整理的.NET和.NET Core Web APi FormData多文件上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。