在 .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>
在 .NET Core项目中使用UEditor图片、文件上传服务的更多相关文章
- .Net Core 图片文件上传下载
当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...
- 一个简单的QQ隐藏图生成算法 通过jQuery和C#分别实现对.NET Core Web Api的访问以及文件上传
一个简单的QQ隐藏图生成算法 隐藏图不是什么新鲜的东西,具体表现在大部分社交软件中,预览图看到的是一张图,而点开后看到的又是另一张图.虽然很早就看到过这类图片,但是一直没有仔细研究过它的原理,今天 ...
- commons-fileload图片文件上传工具 , servlet文件图片上传案列
本案列是java maven工程小项目,提供个大家学习! 1.在pom.xml文件中导入依赖: <!--文件上传依赖--><dependency> <groupId&g ...
- SpringMvc MultipartFile 图片文件上传
spring-servlet.xml <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipar ...
- springmvc图片文件上传接口
springmvc图片文件上传 用MultipartFile文件方式传输 Controller package com.controller; import java.awt.image.Buffer ...
- UEditor Flash文件上传-crossdomain.xml文件配置
在使用UEditor富文本时,如果客户端的浏览器是低版本浏览器,如IE7.IE8等,UEditor的文件上传方式将会使用flash方式上传而不是html5,而flash在跨域时唯一的限制策略就是cro ...
- zt对于C#中的FileUpload解决文件上传大小限制的问题设置
对于C#中的FileUpload解决文件上传大小限制的问题设置 您可能没意识到,但对于可以使用该技术上载的文件的大小存在限制.默认情况下,使用 FileUpload 控件上载到服务器的文件最大为 4M ...
- 分享知识-快乐自己:SpringMvc中的单多文件上传及文件下载
摘要:SpringMvc中的单多文件上传及文件下载:(以下是核心代码(拿过去直接能用)不谢) <!--设置文件上传需要的jar--> <dependency> <grou ...
- ueditor 图片粘贴上传,实现图文粘贴,图片自动上传
如何做到 ueditor批量上传word图片? 1.前端引用代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN& ...
随机推荐
- PHP 抽象类实现接口注意事项(含PHP与.Net的区别)
最近在学习Drupal8,看到源码里面一个抽象类BlockBase实现了一个接口BlockPluginInterface,但是并没有实现该接口的所有方法.然后我就不淡定了,因为之前是做.NET的,记忆 ...
- maven 编译打包时,明明类文件没有问题,却提示错误:未结束的字符串字面值,maven-compiler-plugin:2.3.2
maven错误提示如下: Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:compile (de ...
- [WinCE | VS2008 | Solution] VS2008 building WinCE projects taking a long time
1. Open C:\Windows\Microsoft.NET\Framework\v3.5\Microsoft.CompactFramework.Common.targets 2. Find pa ...
- MySQL 5.7.24 privileges有哪些?
root@localhost:3306.sock [mysql]>select version();+------------+| version() |+------------+| 5.7 ...
- 模仿SDWebImage实现异步加载图片
模仿SDWebImage实现异步加载图片 SDWebImage想必大家都不陌生吧,要实现它的图片异步加载功能这个还是很简单的. 注意:此处我只实现了异步加载图片,并没有将文件缓存到本地的打算哦:) 源 ...
- 审计系统---初识堡垒机180501【all】
堡垒机背景[审计系统] SRE是指Site Reliability Engineer (/运维工程师=运行维护 业务系统) 运维: 维护系统,维护业务,跟业务去走 防火墙: 禁止不必要的访问[直接访问 ...
- 企业级NFS网络文件共享服务_【all】
1.1. 什么是NFS(1台机器提供服务) Network File System(网络文件系统)通过局域网让不同的主机系统之间共享文件或目录. NFS客户端可以通过挂载的方式将NFS服务器端共享的数 ...
- iptables简单规则记录
先来一句:好记性不如烂笔头! 1.iptables简介 iptables是基于包过滤的防火墙,它主要工作在osi模型的2,,4层,也可以工作在7层(iptables + squid) 2.原理 防火墙 ...
- Linux上安装ZooKeeper并设置开机启动(CentOS7+ZooKeeper3.4.10)
1下载Zookeeper 2安装启动测试 2.1上载压缩文件并解压 2.2新建 zookeeper配置文件 2.3安装JDK 2.4启动zookeeper 2.5查看zookeeper的状态 3将Zo ...
- Kubernetes dashboard 配置
安装前准备 下载dashboard的yaml文件 wget -O kube-dashboard.yaml https://git.io/kube-dashboard-no-rbac 这个版本是没有权限 ...