TinyMCE編輯器圖片上傳擴展（base64方式），asp.net mvc5

編輯器上傳圖片一般都是先上傳到伺服器中，若是用戶取消或忘記提交表單就產生一張廢圖在空間裡面，時間一長就產生大量占用空間的無用圖片，現在就試試提交前先用base64，提交後，在後臺處理編輯器內容中的<img>標簽src中的base64圖片（保存成圖片文件並返回相對地址字元串替換原來的base64編碼圖片，測試在新的TinyMCE編輯器(Version: 5.0.12 (2019-07-18)）通過。瀏覽器為chrome

代碼：

           tinymce.init({
                selector: 'textarea#Content',
                plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help paste emoticons autosave ',
                toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                         styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                         table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen',
                menubar: false,
                height: 500,
                language: 'zh_CN',
                images_upload_handler: function (blobInfo, success, failure) {
                    var reader = new FileReader();
                    reader.readAsDataURL(blobInfo.blob());
                    reader.onload = function () {
                        success(this.result);
                    }
                }
            });

　　plugins插件及toolbar工具欄內容自行刪減添加，主要是 images_upload_handler這裡，不知是TinyMCE5.x版本很強大，還是瀏覽器本身功能，編輯器中會自動base64編碼與blob:http://協議互轉。你在源碼上看到的是非base64編碼

後臺用到Regex類Replace方法的高級用法：此方法有個委托參數，用這參數可以傳入一個方法，在這個方法裡面進行主要操作（保存base64到空間中並返回圖片地址的引用字元串）

後臺asp.net(c#)代碼：

        public static string SaveBase64ToImageAndOutUrl(string htmlContent)
        {
            // 定義正則表達式用來匹配 img 標簽 src屬性中的base64代碼  
            string strImg = @"data\:image/(jpeg|png|gif|jpg|bmp);base64\,(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?";

            string content = Regex.Replace(htmlContent, strImg, new MatchEvaluator(CorrectString), RegexOptions.Compiled | RegexOptions.IgnoreCase);
            return content;
        }

        private static string CorrectString(Match match)
        {
            string imgSrc = match.Value;
            if (imgSrc.Substring(0, 10) != "data:image")
                return imgSrc;

            double size = imgSrc.Split(',')[1].TrimEnd('=').Length * .75;
                 
            if (size > Config.SiteConfig.ImageUploadSize * 1048576)
                    throw new Exception("內容中有些圖片過大！");


            Response rsp = Upload.Base64ToImageAndSave(imgSrc, "/Upload");
            if (rsp.Code == 0)
                throw new Exception(rsp.Message);

            return rsp.Data;
        }

上面代碼涉及到的類Respones

    public class Response
    {
        /// <summary>
        /// 返回代碼. 0-失敗，1-成功
        /// </summary>
        public int Code { get; set; }

        /// <summary>
        /// 返回消息
        /// </summary>
        public string Message { get; set; }

        /// <summary>
        /// 返回數據
        /// </summary>
        public dynamic Data { get; set; }

        public Response()
        {
            Code = 0;
        }
    }

上面的base64保存圖片的方法，請參考博客園裡其他大俠寫的，好多好多，我就不再貼上來了

缺點就是客戶端查看源代碼時會很慢，另外圖片多或圖片大時提交數據時要在web.config中設置，不然提交不了。這裡設置了6MB，可以根據需要設置大小

  <system.web>
    <!-- 表單提交處理總長度（maxRequestLength）為6MB -->
    <httpRuntime maxRequestLength="6291456"/>
  </system.web>