1. 程式人生 > >循序漸進學.Net Core Web Api開發系列【5】:檔案上傳

循序漸進學.Net Core Web Api開發系列【5】:檔案上傳

系列目錄

一、概述

本篇介紹通過.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選擇檔案了

但有個缺點是隻能上傳一個檔案,如何實現可以選擇多個檔案還不會搞。