.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 = 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");
        }
    }
}

编译，预览一下。即可！