首页 > 代码库 > .net core CKEditor 图片上传
.net core CKEditor 图片上传
最近在玩 asp.net core,不想用UEditor,想使用CKEditor。故需要图片上传功能。
废话不多说,先上效果图:
CKEditor 前端代码:
<text id="content" name="content"></text> <script> CKEDITOR.replace(‘content‘); </script>
CKeditor config.js 配置代码:需要配置图片上传路径
CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = ‘fr‘; // config.uiColor = ‘#AADC6E‘; config.baseHref = "http://" + location.host; config.filebrowserImageUploadUrl = ‘/Upload/UploadImage‘; config.font_names = ‘宋体/宋体;黑体/黑体;楷体/楷体;幼圆/幼圆;微软雅黑/微软雅黑;‘ + config.font_names; config.allowedContent = true;};
如上代码,我们使用UploadController的UploadImage方法来处理上传事件。
服务端代码:
using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using Microsoft.AspNetCore.Mvc;using Microsoft.AspNetCore.Hosting;using System.IO;using Ratuo.Common;namespace Ratuo.Web.Controllers{ public class UploadController : Controller { private IHostingEnvironment _env; public UploadController(IHostingEnvironment env) { _env = env; } public async Task<IActionResult> UploadImage() { string callback = Request.Query["CKEditorFuncNum"];//要求返回值 var upload = Request.Form.Files[0]; string tpl = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(\"{1}\", \"{0}\", \"{2}\");</script>"; if (upload == null) return Content(string.Format(tpl, "", callback, "请选择一张图片!"), "text/html"); //判断是否是图片类型 List<string> imgtypelist = new List<string> { "image/pjpeg", "image/png", "image/x-png", "image/gif", "image/bmp" }; if(imgtypelist.FindIndex(x=>x == upload.ContentType) == -1) { return Content(string.Format(tpl, "", callback, "请上传一张图片!"), "text/html"); } var data = http://www.mamicode.com/Request.Form.Files["upload"]; string filepath = _env.WebRootPath+"\\userfile\\images"; string imgname = Utils.GetOrderNum() + Utils.GetFileExtName(upload.FileName); string fullpath = Path.Combine(filepath, imgname); try { if (!Directory.Exists(filepath)) Directory.CreateDirectory(filepath); if (data != null) { await Task.Run(() => { using (FileStream fs = new FileStream(fullpath, FileMode.Create)) { data.CopyTo(fs); } }); } } catch (Exception ex) { return Content(string.Format(tpl, "", callback, "图片上传失败:"+ ex.Message), "text/html"); } return Content(string.Format(tpl, "/userfile/images/" + imgname, callback, ""), "text/html"); } }}
编译,预览一下。即可!
.net core CKEditor 图片上传
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。