最近專案又與Canvas跟文件編輯器有配合,紀錄一下從前端拿到資料與後端API串接的整個過程
前端拿到複數個Base64與其他欄位的 JSON Class 字串,並在後端用正則表達式解析並將bas64碼取出送到Serv
Class :
public class ImgData
{
public string PagePK { get; set; }
public string ItemCode { get; set; }
public string Base64String { get; set; }
}
前端:模擬各式編輯器拿到的html string 或 base64 Code 組好後往後端丟,因紀錄僅簡易呈現。
var data = [
{
PagePK : 1,
ItemCode : 11,
Base64String: 'data:image/png;base64,base64的值...紀錄階段暫時省略...'
},
{
PagePK : 2,
ItemCode : 22,
Base64String: 'data:image/png;base64,base64的值...紀錄階段暫時省略...'
},
{
PagePK : 3,
ItemCode : 33,
Base64String: 'data:image/png;base64,base64的值...紀錄階段暫時省略...'
},
];
$.ajax({
method: "Post",
url: '/MyTestAPI/UploadImageString',
cache: false,
data: JSON.stringify(data),
contentType: "application/json"
}).done(function (result) {
console.log("result...", result);
});
後端:用[FromBody]
拿到List資料,用foreach去繞每筆資料,先利用MatchCollection
與 正則表達式 去過濾一次Base64資料,
再利用第二個Foreach去繞每筆MatchCollection
的值,拿到 Base64值後先放到 Byte[ ] 裡面再轉成 MemoryStream,
接著與其他對應的值和Serv做串接寫入即可,如跑完所有資料後記得在最後Dispose資源。
[HttpPost("[action]")]
public async Task<IActionResult> UploadImageString([FromBody] List<ImgData> _imgData)
{
ReturnResult result = new ReturnResult();
try
{
foreach (ImgData data in _imgData)
{
if (string.IsNullOrWhiteSpace(data.Base64String))
{
return null;
}
//正則表達式-抓取Base64碼
string Rule = @"data:image/(?<type>[^;]+)[^,]+,(?<data>[A-Za-z0-9\+/=]+)";
MatchCollection base64Img = Regex.Matches(data.Base64String, Rule, RegexOptions.IgnoreCase);
if (base64Img != null && base64Img.Count > 0)
{
foreach (Match m in base64Img)
{
string type = m.Groups["type"].Value;
string value = m.Groups["data"].Value;
byte[] bytes = Convert.FromBase64String(value);
MemoryStream stream = new MemoryStream(bytes);
//取得資料流,使用 await 寫入Serv 儲存 ...
//驗證Serv儲存結果並將此筆Img資料與其他資料表做關聯 ...
}
}
}
//全部做完後記得Dispose Serv資源 ...
}
catch (Exception ex)
{
result.Error("上傳檔案發生異常");
}
if (ResultStatus.Success == result.Status)
result.Success("檔案上傳成功");
else
result.Failure("無上傳檔案");
return Content(result.ToJson());
}