[Asp.net core 2.0]Ueditor 图片上传

摘要

在项目中要用到富文本编辑器，包含上传图片，插入视频等功能。但ueditor只有.net版本，没有支持core。那么上传等接口就需要自己实现了。

一个例子

首先去百度ueditor官网下载简化版的ueditor。并引入到项目中

如图：



页面引用以下几个文件：

<link href="~/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet" />
<script src="~/ueditor/third-party/jquery.min.js"></script>
<script src="~/ueditor/umeditor.config.js" charset="utf-8"></script>
<script src="~/ueditor/umeditor.js" charset="utf-8"></script>
<script src="~/ueditor/lang/zh-cn/zh-cn.js"></script>

修改ueditor配置文件：

//为编辑器实例添加一个路径，这个不能被注释
UMEDITOR_HOME_URL: URL

//图片上传配置区
, imageUrl: "../fileupload/UeditorUpload"             //图片上传提交地址
, imagePath: URL + "net/"                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
, imageFieldName: "upfile"                   //图片数据的key,若此处修改，需要在后台对应文件修改对应参数

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义
, toolbar: [
'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize',
'| justifyleft justifycenter justifyright justifyjustify |',
'link unlink | image video |',
'horizontal print preview fullscreen'
]

添加接收文件控制器，并提供接口

using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace FireFly.Admin.Controllers
{
public class FileUploadController : Controller
{
private IHostingEnvironment hostingEnv;
public FileUploadController(IHostingEnvironment env)
{
hostingEnv = env;
}
public async Task<IActionResult> UeditorUpload()
{
var files = Request.Form.Files;
string callback = Request.Query["callback"];
string editorId = Request.Query["editorid"];
if (files != null && files.Count > 0)
{
var file = files[0];
string contentPath = hostingEnv.WebRootPath;
string fileDir = Path.Combine(contentPath, "upload");
if (!Directory.Exists(fileDir))
{
Directory.CreateDirectory(fileDir);
}
string fileExt = Path.GetExtension(file.FileName);
string newFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + fileExt;
string filePath = Path.Combine(fileDir, newFileName);
using (FileStream fs = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(fs);
}
var fileInfo = getUploadInfo("../../upload/" + newFileName, file.FileName,
Path.GetFileName(filePath), file.Length, fileExt);
string json = BuildJson(fileInfo);

Response.ContentType = "text/html";
if (callback != null)
{
await Response.WriteAsync(String.Format("<script>{0}(JSON.parse(\"{1}\"));</script>", callback, json));
}
else
{
await Response.WriteAsync(json);
}
return View();
}
return NoContent();
}
private string BuildJson(Hashtable info)
{
List<string> fields = new List<string>();
string[] keys = new string[] { "originalName", "name", "url", "size", "state", "type" };
for (int i = 0; i < keys.Length; i++)
{
fields.Add(String.Format("\"{0}\": \"{1}\"", keys[i], info[keys[i]]));
}
return "{" + String.Join(",", fields) + "}";
}
/**
* 获取上传信息
* @return Hashtable
*/
private Hashtable getUploadInfo(string URL, string originalName, string name, long size, string type, string state = "SUCCESS")
{
Hashtable infoList = new Hashtable();

infoList.Add("state", state);
infoList.Add("url", URL);
infoList.Add("originalName", originalName);
infoList.Add("name", Path.GetFileName(URL));
infoList.Add("size", size);
infoList.Add("type", Path.GetExtension(originalName));

return infoList;
}
}

}

测试

总结

这里简单实现了ueditor在asp.net core 2.0 web应用中的使用，需要实现的只是文件的上传接口。