本文首發《智客工坊-.net mvc和webapi實現檔案上傳》。

導航搭建專案.NET MVC 實現上傳Web API 實現上傳原始碼

在日常開發中,檔案上傳是必不可少的功能。如,使用者頭像,excel檔案上傳等等。但是,由於開發方式的問題,比如是單體應用還是前後端分離模式,導致實現上有些許的差異。

搭建專案開啟visual studio 2019,新建一個MVC web 專案。取名upload.netcore.web新建一個MVC控制器,取名TestController新建一個web api 控制器,取名MediaController

建好之後的專案結構如下:

.NET MVC 實現上傳

這個是標準的MVC模式的寫法,View層提交Form表單方式上傳檔案。

MVC控制器檔案上傳的實現

這裡模擬上傳檔案到專案的根目錄的uploads資料夾,可以根據實際情況實現本地儲存或者伺服器儲存。

[HttpPost]        public async Task<IActionResult> PostMedia([FromForm]IFormFile file)        {            var formFile = Request.Form.Files.FirstOrDefault();            if (formFile == null)            {                throw new Exception("檔案不能為空");            }            //檔案上傳            var uploads = Path.Combine(_environment.WebRootPath, "uploads");            using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))            {                await file.CopyToAsync(fileStream);            }            return Ok(new { success = true });        }

檢視實現

@{    ViewData["Title"] = "UploadByRazor";}<h1>UploadByRazor</h1><div class="widget-main no-padding">    @using (Html.BeginForm("PostMedia", "test", FormMethod.Post,new { enctype = "multipart/form-data" }))    {        <span>上傳檔案</span>        <br />        <input type="file" name="file" />        <br />        <br />        <input id="ButtonUpload" type="submit" value="提交" />    }</div>

.net MVC 在用到上傳檔案控制元件時，必須新增enctype = "multipart/form-data"屬性'

enctype = "multipart/form-data的作用是：設定表單的MIME編碼。預設情況,這個編碼格式是application/x-www-form-urlencoded,不能用於檔案上傳;只有使用了application/x-www-form-urlencoded,才能完整把資料提交到controller(後臺程式碼)中。

Web API 實現上傳

此種場景一般用於前後端分離的開發模式。後端提供restful風格介面供前端呼叫(這裡有詳細:.NET Core 跨平臺)

webapi控制器檔案上傳的實現

[Route("api/[controller]")]    [ApiController]    public class MediaController : ControllerBase    {        private IHostingEnvironment _environment;        public MediaController(IHostingEnvironment env)        {            _environment = env;        }        /// <summary>        /// 新增（上傳）多媒體檔案        /// </summary>        /// <param name="file"></param>        /// <returns></returns>        [HttpPost]        [Consumes("application/json", "multipart/form-data")]        public async Task<IActionResult> PostMedia([FromForm]IFormFile file)        {            var formFile = Request.Form.Files.FirstOrDefault();            if (formFile == null)            {                throw new Exception("檔案不能為空");            }            //檔案上傳            var uploads = Path.Combine(_environment.WebRootPath, "uploads");            using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))            {                await file.CopyToAsync(fileStream);            }            return Ok(new { success = true });        }    }

前端呼叫postman測試ajax 測試postman測試jquery ajax 呼叫

@{    ViewData["Title"] = "UploadByAjax";}<h1>UploadByAjax</h1><script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script><input id="fileUpload" type="file" /><br /><input id="displayName" type="text" value="Enter a unique name" /><br /><input id="addFileButton" type="button" value="Upload" onclick="uploadFile()" /><script type="text/javascript">    function uploadFile() {        //上傳檔案        var fdate = new FormData();        var file = $("#fileUpload").get(0).files;        //如果檔案存在        if (file != null) {            //自定義一個檔名稱並新增到尾部            fdate.append("file", file[0]);        }        var ajaxRequest = $.ajax({            url: "http://localhost:5000/api/Media",            type: "post",            processData: false,            contentType: false,            data: fdate        });    }</script>

原始碼

  talk is cheap,show me the code。【留言可以獲取原始碼】

智客工坊-如何用.net mvc和webapi實現檔案上傳