在 .NET Core项目中使用UEditor图片、文件上传服务

在.NET Framework中使用UEditor时，只需要将UEditor提供的后端服务，部署为一个子程序，即可直接使用文件上传相关的服务，但是UEditor官方并未提供.Net Core的项目，并且.NET Core项目很多时候是跑在Linux上面的，也没有子程序一说。

为了解决这个问题，我开发了一个.NET Core版本的后端服务，他已经在Github上开源https://github.com/baiyunchen/UEditor.Core，并提供了比较优质的中文文档供大家参考。

大家可以参考Github中的文档和源码，以下内容时从Github中Copy而来：

建议别往下看了，直接去看Github中的内容！觉得有用的，请在Github上留下你的Star

安装

建议从从nuget安装

方式1：可以直接在Nuget中搜索UEditor.Core并安装
方式2：通过命令行安装

Install-Package UEditor.Core

配置

并在Startup.cs中的ConfigureServices方法中，加入以下代码：

services.AddUEditorService("ueditor.json",true);

由于.Net Core默认只会从wwwroot目录加载静态文件，其他文件夹的静态文件无法正常访问。而我们希望将图片上传到网站根目录的upload文件夹下，所以需要额外在Startup.cs类的Configure方法中，增加如下代码：

app.UseStaticFiles(new StaticFileOptions

{

   FileProvider = new PhysicalFileProvider(

       Path.Combine(Directory.GetCurrentDirectory(), "upload")),

   RequestPath = "/upload",

   OnPrepareResponse = ctx =>

   {

       ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=36000");

   }

});

然后在项目的根目录，创建upload文件夹（这里不创建会报错）。

接下来，我们需要将ueditor后端的config.js 改名为ueditor.json添加到项目根目录。

这里的配置文件可以在ueditor的下载包中，net文件夹下面找到，目前版本的具体路径如下： ueditor1_4_3_3-utf8-net\utf8-net\net\config.json

如果你懒得下载，也可以在本项目GitHub的Sample.Web下面找到ueditor.json文件，然后粘贴到你项目的根目录下。

如果你是从UEditor的下载包中复制的该文件，需要全局将该文件中的/ueditor/net/替换为/

创建后端接口

创建一个UEditorController,并添加如下代码：

public class UEditorController : Controller

{

    private readonly UEditorService _ueditorService;

    public UEditorController(UEditorService ueditorService)

    {

        this._ueditorService = ueditorService;

    }

    [HttpGet, HttpPost]

    public ContentResult Upload()

    {

        var response = _ueditorService.UploadAndGetResponse(HttpContext);

        return Content(response.Result, response.ContentType);

    }

}

引入ueditor并配置

从ueditor官网下载最新版本的压缩包，并放到项目的wwwroot下面的lib文件夹中，然后在你需要的使用UEditor的页面或全局引入ueditor.config.js和ueditor.all.min.js文件。

打开ueditor.config.js文件，将其中的serverUrl项改为：/ueditor/upload。

开始使用UEditor

这部分如果遇到问题，请参考UEditor的官方文档http://fex.baidu.com/ueditor/。

在你需要使用UEditor的HTML代码中，添加如下代码：

<script id="container" name="content" type="text/plain">

    欢迎使用Ueditor.Core

</script>

然后在页面的最后添加如下JS代码：

<script type="text/javascript">

    var ue = UE.getEditor('container', {

        initialFrameHeight: 500

    });

</script>