在 .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>