关于富文本编辑器中“粘贴截图”base64图片保存成独立文件的方法

目前前端常见的富文本编辑器基本都支持“截图插入”，也就是：你通过QQ或者微信或者任何截图工具，截图完成可以直接粘贴到富文本编辑器里。这时富文本编辑器的图片会以base6 编码的形式存储或呈现，后端如果置之不理，那么这图片数据将会和文本内容一起存入数据库中。先不说日复一日图片多了数据库性能的问题，仅仅说后期如果想单独引用图片，就无解。所以后端程序接到这个富文本的时候就必须对图片编码进行解析，实现分离保存。

我用c#实现的后端方法，供您参考：

private string SaveBateImage(string richText) 
{
string pattern = @"]*src\s*=\s*['""](data:image\/(.*?);base64,(.*?)['""][^>]*>)";
Regex regex = new Regex(pattern, RegexOptions.IgnoreCase);
string filePath = "/uploadfile/image/" + DateTime.Now.ToString("yyyyMM") + "/";
    if (!Directory.Exists(filePath)) { Directory.CreateDirectory(Server.MapPath(filePath)); }
    
    MatchCollection matches = regex.Matches(richText);
    int i = 0;
    foreach (Match match in matches)
    {
        string base64Image = match.Groups[3].Value;
        string mimeType = match.Groups[2].Value;
        //取出原始图片扩展名，如果取不到则强制为jpg
        if (string.IsNullOrEmpty(mimeType))
        {
            mimeType = "jpg"; // 默认设置为jpg
        }
        byte[] imageBytes = Convert.FromBase64String(base64Image);
        string fileName = filePath + DateTime.Now.ToString("ddHHmmss") + "_" + (i++) + "." + mimeType;
        System.IO.File.WriteAllBytes(Server.MapPath(fileName), imageBytes);
        richText = richText.Replace(match.Value, $"《img src="\" {filename}\""="">");
    }

    return richText;
}

上述方法写的已经很清晰了，主要是以下几个重要逻辑：
1、预处理：从富文本中拆出可能存在的base64图片
2、循环处理：因为有可能有多个这种图片
3、保存：用时间+顺序号保存，顺序号是因为可能同一秒会保存多个图片
4、替换：图片保存完以后用新的路径替换富文本中的base64编码。
6、齐活，入库！
这样最终实现了图文分离入库，数据库压力减轻，图片以物理文件形式存储，后期也可以方便的调用和替换。

【提示】这个文章还有个姊妹篇《关于富文本编辑器中将远程图片保存为本地文件的方法》，自己翻吧……