1、創建Api項目 我用的是VS2019 Core3.1 。打開Vs2019 創建Asp.Net Core Web應用程式命名CoreWebApi 創建選擇API 在Controller文件夾下麵添加一個Api控制器 FileUp，修改Api的路由 [Route("api/[controller]/ ...
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接收，這樣文件就沒了。
紙上得來終覺淺，覺知這事不寫還是不行哈。
