在 .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.jsueditor.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>
上一篇:关于ruby -gem无法切换淘宝源


下一篇:js图片压缩+ajax上传