技術標籤：C#&&ASP.net.netc#apiupload

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

導航

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

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

這裡筆者總結了.NET` MVC和Web API 2 中方式實現上傳並附上原始碼,希望能夠對您有幫助。

搭建專案

• 開啟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實現檔案上傳