Asp.Net Core 3.1學習-Web Api 檔案上傳 Ajax請求以及跨域問題（3）-有解無憂

1、創建Api專案

我用的是VS2019 Core3.1 ，打開Vs2019 創建Asp.Net Core Web應用程式命名CoreWebApi 創建選擇API 在Controller檔案夾下面添加一個Api控制器 FileUp，修改Api的路由 [Route("api/[controller]/[action]")] 這樣就可以訪問到具體的某一個了寫一個測驗 api

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace CoreWebApi.Controllers
{
    [Route("api/[controller]/[action]")]//修改路由
    //[Route("api/[controller]")]//默認路由
    [ApiController]
    public class FileUpController : ControllerBase
    {
        /// <summary>
        /// 測驗介面
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        //[HttpGet,Route("Test")]//默認路由
        
        public string Test()
        {
            return "這是測驗介面";
        }
    }
}

寫Api的時候一定要加上，請求方式 post、get 其他的暫時我沒用到，默認的路由是被我注釋的，修改一下讓他的訪問時api / 控制器 / 方法名稱，不改也可以，測驗的介面就用注釋的那個特性，然后運行專案，地址欄輸入https://localhost:44376/api/FileUp/Test

2、上傳檔案介面

在FileUp里寫一個上傳檔案的介面所有代碼都在下，OutPut是一個輸出的類，Dto里面是一些引數應該都有看得懂，里面就是上傳檔案儲存到服務器上并沒有資料庫操作，需要的加上去就可以了，

注意：有些會加[Consumes("application/json")]//application/json//application/x-www-form-urlencoded 這樣來驗證媒體型別，這里我弄了好久才想起來我寫了這個，因為檔案上傳怎么說呢，媒體型別肯定不會是Json之類的，我以前的Api就是在基礎Api類里加了這個，給我弄了頭皮發麻才看到

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

using CoreWebApi.Models;
using Newtonsoft.Json;
using Microsoft.Extensions.Hosting;
using System.IO;

namespace CoreWebApi.Controllers
{
    [Route("api/[controller]/[action]")]//修改路由
    //[Route("api/[controller]")]//默認路由
    [ApiController]
    public class FileUpController : ControllerBase
    {
        public  IHostingEnvironment env;
        public FileUpController(IHostingEnvironment _env)
        {
            env = _env;
        }
        /// <summary>
        /// 測驗介面
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        //[HttpGet,Route("Test")]//默認路由
        
        public string Test()
        {
            return "這是測驗介面";
        }
        /// <summary>
        /// 檔案上傳
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public async Task<OutPut> FileUp()
        {
            var ret = new OutPut();
            try
            {
                //不能用FromBody
                var dto = JsonConvert.DeserializeObject<ImagesDto>(Request.Form["ImageModelInfo"]);//檔案類物體引數
                var files = Request.Form.Files;//接收上傳的檔案，可能多個 看前臺
                if (files.Count > 0)
                {
                    var path = env.ContentRootPath + @"/Uploads/Images/";//絕對路徑
                    string dirPath = Path.Combine(path, dto.Type + "/");//絕對徑路 儲存檔案路徑的檔案夾
                    if (!Directory.Exists(dirPath))//查看檔案夾是否存在
                        Directory.CreateDirectory(dirPath);
                    var file = files.Where(x => true).FirstOrDefault();//只取多檔案的一個
                    var fileNam = $"{Guid.NewGuid():N}_{file.FileName}";//新檔案名
                    string snPath = $"{dirPath + fileNam}";//儲存檔案路徑
                    using var stream = new FileStream(snPath, FileMode.Create);
                    await file.CopyToAsync(stream);
                    //次出還可以進行資料庫操作 保存到資料庫
                    ret = new OutPut { Code = 200, Msg = "上傳成功", Success = true };  
                }
                else//沒有圖片
                {
                    ret = new OutPut { Code = 400, Msg = "請上傳圖片", Success = false };
                }
            }
            catch (Exception ex)
            {
                ret = new OutPut { Code = 500, Msg = $"例外：{ex.Message}", Success = false };
            }
            return ret;
        }
    }
}

Dto與回傳的類

 /// <summary>
    /// 回傳輸出類
    /// </summary>
    public class OutPut
    {
        /// <summary>
        /// 狀態碼
        /// </summary>
        public int Code { get; set; }
        /// <summary>
        /// 訊息
        /// </summary>
        public string Msg { get; set; }
        /// <summary>
        /// 是否成功
        /// </summary>
        public bool Success { get; set; }
        /// <summary>
        /// 回傳資料
        /// </summary>
        public object Data { get; set; }
    }
/// <summary>
    /// 接收引數Dto
    /// </summary>
    public class ImagesDto
    {
        /// <summary>
        /// ID
        /// </summary>
        public int ID { get; set; }
        /// <summary>
        /// 名稱
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// 地址
        /// </summary>
        public string Url { get; set; }
        /// <summary>
        /// 備注
        /// </summary>
        public string Remark { get; set; }
        /// <summary>
        /// 
        /// </summary>
        public int RelationId { get; set; }
        /// <summary>
        /// 型別
        /// </summary>
        public int Type { get; set; }
    }

3、前臺Ajax呼叫

我在一個MVC程式里面用了個Ajax呼叫下面是前端代碼，contentType這個資源的型別我轉載著坑里好久了，哈哈，

@{
    ViewBag.Title = "測驗";
}

<h2>檔案上傳測驗</h2>
<form enctype="multipart/form-data" id="formData">
    <div>
        <br /><br /><br />
        檔案：<input type="file" id="filesp" name="filesp" /><br /><br />
        名稱：<input type="text" id="fileName" name="fileName" /><br /><br />
        備注：<input type="text" id="txtRemake" name="txtRemake" /><br /><br />
        RelationId：<input type="number" id="txtRelationId" name="txtRelationId" /><br /><br />
        型別：<select id="selType" name="selType">
            <option value="1">動物</option>
            <option value="2">植物</option>
            <option value="3">妹子</option>
            <option value="3">風景</option>
            <option value="4">滑稽</option>
            <option value="100">其他</option>
        </select>
        <br /><br />
        <input type="button" id="btnSave" name="btnSave" value="提交" />
    </div>
</form>

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnSave").click(function () {
            var data = new FormData(document.getElementById("formData"));
            //引數
            var parame = JSON.stringify({ Name: $("#fileName").val(), Remark: $("#txtRemake").val(), Type: $("#selType").val(), RelationId: $("#txtRelationId").val() });
            data.append("ImageModelInfo", parame);
            $.ajax({
                type: "post",
                url: "https://localhost:44376/api/FileUp/FileUp",
                dataType: "json",
                data: data,
                async: true,
                contentType: false,//物體頭部用于指示資源的MIME型別 media type ，這里要為false
                processData: false,//processData 默認為true，當設定為true的時候,jquery ajax 提交的時候不會序列化 data，而是直接使用data
                success: function (data) {
                    console.log(data);
                },
                error: function (data) {
                    console.log("錯誤" + data);
                }
            });
        });
    });
</script>

運行起來看看測驗一下，Api那邊也打好斷點，打來瀏覽器調式就是很熟悉的bug就來了（一天看不到出錯仿佛心里不踏實）

很明顯的CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing），它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制，所以這里我們就要允許前端來訪問，從而就要在Api增加跨域；

4、跨域設定

在Startup.cs下面的ConfigureServices 中標添加services.AddCors(option => option.AddPolicy("AllowCors", bu => bu.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()));

 public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();
            //跨域
            services.AddCors(option => option.AddPolicy("AllowCors", bu => bu.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()));
        }

AllowAnyOrigin :允許CORS請求從任何源來訪問，這是不安全的
AllowAnyHeader：允許所有的請求頭

AllowCredentials ：服務端也需要允許證書，
AllowAnyMethod允許跨域策略允許所有的方法：GET/POST/PUT/DELETE 等方法如果進行限制需要 AllowAnyMethod("GET","POST") 這樣來進行訪問方法的限制

在Configure中添加中間件app.UseCors("AllowCors");，集體要限制哪些看個人了

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseHttpsRedirection();

            app.UseRouting();


            app.UseAuthorization();

            //跨域
            app.UseCors("AllowCors");
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });

        }

現在就配置好了在需要跨域的地方加上特性[EnableCors("AllowCors")]就行了 ，參考命名空間using Microsoft.AspNetCore.Cors;

    [EnableCors("AllowCors")]
    [Route("api/[controller]/[action]")]//修改路由
    //[Route("api/[controller]")]//默認路由
    [ApiController]
    public class FileUpController : ControllerBase
    {
        public  IHostingEnvironment env;
        public FileUpController(IHostingEnvironment _env)
        {
            env = _env;
        }
        /// <summary>
        /// 測驗介面
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        //[HttpGet,Route("Test")]//默認路由
        
        public string Test()
        {
            return "這是測驗介面";
        }

現在再來呼叫就解決了

前臺結果看看，檔案夾也創建了，

5、總結

如果所有Api都要跨域的話就建立一個基礎的Api 讓所有的都繼承這個Api，就需要打賞跨域的標簽就可以了；

檔案上傳還可以用From直接提交這邊用List<IFormFile>接收，也可以像FromBady一樣的一個來接收搞，單詞忘了0.0，引數不能FermBody接收，這樣檔案就沒了，

紙上得來終覺淺，覺知這事不寫還是不行哈，

原文鏈接：https://www.cnblogs.com/w5942066/p/12762076.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/40700.html

標籤：.NET Core

上一篇：LnskyDB 3.1版本已支持資料庫事務

下一篇：Blazor WebAssembly 3.2.0 已在塔架就位將發射新一代前端SPA框架