请选择 进入手机版 | 继续访问电脑版

马上加入IBC程序猿 各种源码随意下,各种教程随便看! 注册 每日签到 加入编程讨论群

C#教程 ASP.NET教程 C#视频教程程序源码享受不尽 C#技术求助 ASP.NET技术求助

【源码下载】 社群合作 申请版主 程序开发 【远程协助】 每天乐一乐 每日签到 【承接外包项目】 面试-葵花宝典下载

官方一群:

官方二群:

TinyMCE编辑器图片上传扩展(base64方式),asp.net mvc5

[复制链接]
查看2162 | 回复0 | 2019-9-12 16:20:13 | 显示全部楼层 |阅读模式

编辑器上传图片一样平常都是先上传到服务器中,若是用户取消或忘记提交表单就产生一张废图在空间内里,时间一长就产生大量占用空间的无用图片,现在就试试提交前先用base64,提交后,在后台处理编辑器内容中的标签src中的base64图片(保存成图片文件并返回相对所在字符串更换原来的base64编码图片,测试在新的TinyMCE编辑器(Version: 5.0.12 (2019-07-18))通过。欣赏器为chrome

代码:

  1. tinymce.init({
  2. selector: 'textarea#Content',
  3. 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 ',
  4. toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
  5. styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
  6. table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen',
  7. menubar: false,
  8. height: 500,
  9. language: 'zh_CN',
  10. images_upload_handler: function (blobInfo, success, failure) {
  11. var reader = new FileReader();
  12. reader.readAsDataURL(blobInfo.blob());
  13. reader.onload = function () {
  14. success(this.result);
  15. }
  16. }
  17. });
复制代码

  plugins插件及toolbar工具栏内容自行删减添加,紧张是 images_upload_handler这里,不知是TinyMCE5.x版本很强盛,照旧欣赏器本身功能,编辑器中会自动base64编码与blob:http://协议互转。你在源码上看到的是非base64编码

后台用到Regex类Replace方法的高级用法:此方法有个委托参数,用这参数可以传入一个方法,在这个方法内里举行紧张操纵(保存base64到空间中并返回图片所在的引用字符串)

后台asp.net(c#)代码:

  1. public static string SaveBase64ToImageAndOutUrl(string htmlContent)
  2. {
  3. // 界说正则表达式用来匹配 img 标签 src属性中的base64代码
  4. 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}=)?";
  5. string content = Regex.Replace(htmlContent, strImg, new MatchEvaluator(CorrectString), RegexOptions.Compiled | RegexOptions.IgnoreCase);
  6. return content;
  7. }
  8. private static string CorrectString(Match match)
  9. {
  10. string imgSrc = match.Value;
  11. if (imgSrc.Substring(0, 10) != "data:image")
  12. return imgSrc;
  13. double size = imgSrc.Split(',')[1].TrimEnd('=').Length * .75;<br />
  14. if (size > Config.SiteConfig.ImageUploadSize * 1048576)
  15. throw new Exception("内容中有些图片过大!");
  16. Response rsp = Upload.Base64ToImageAndSave(imgSrc, "/Upload");
  17. if (rsp.Code == 0)
  18. throw new Exception(rsp.Message);
  19. return rsp.Data;
  20. }
复制代码

  

上面代码涉及到的类Respones

  1. public class Response
  2. {
  3. /// <summary>
  4. /// 返回代码. 0-失败,1-成功
  5. /// </summary>
  6. public int Code { get; set; }
  7. /// <summary>
  8. /// 返回消息
  9. /// </summary>
  10. public string Message { get; set; }
  11. /// <summary>
  12. /// 返回数据
  13. /// </summary>
  14. public dynamic Data { get; set; }
  15. public Response()
  16. {
  17. Code = 0;
  18. }
  19. }
复制代码

  

上面的base64保存图片的方法,请参考博客园里其他大侠写的,好多好多,我就不再贴上来了

缺点就是客户端查察源代码时会很慢,另外图片多或图片大时提交数据时要在web.config中设置,不然提交不了。这里设置了6MB,可以根据需要设置大小

  1. <system.web>
  2. <!-- 表单提交处理总长度(maxRequestLength)为6MB -->
  3. <httpRuntime maxRequestLength="6291456"/>
  4. </system.web>
复制代码

  







来源:https://www.cnblogs.com/wujiying/p/Base64UploadImage.html
C#论坛 www.ibcibc.com IBC编程社区
C#
C#论坛
IBC编程社区
*滑块验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则