Asp.Net Core 3.0 學習3、Web Api 檔案上傳 Ajax請求以及跨域問題
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接收，這樣檔案就沒了。
紙上得來終覺淺，覺知這事不寫還是不行哈。