[.NET-Core - API ] 傳送HTML String回後端並做Base64碼解析與處理

  • 138
  • 0

最近專案又與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());
        }