UEditor 自定义上传文件功能

作者:vkvi 来源:ITPOW(原创) 日期:2018-12-24

UEditor 除了前端,还带了后端的上传文件功能,有 PHP、ASP、JSP 版本,以前还有 .NET 版本,但是现在新版本中下载不到了。

UEditor 的后端上传功能仅供参考,并不能直接部署于实际应用中,而且 UEditor 官方也说了:“ueditor 开发组所在的 FEX 团队是一个前端团队,我们有一流的前端技术,但后端实力较欠缺”。

所以我们自己来制作一个 .NET 的后端上传吧。

ueditor 目录下创建一个 net 目录。

下面放一个 config.json 文件,这个是配置文件,这个文件可从其他版本(比如 PHP)复制过来。

然后创建一个 controller.ashx。UEditor 前端上传时,会将文件上传给他,UEditor 怎么知道传给它呢?这个路径是在 ueditor.config.js 中配置的。

这个 .ashx 文件根据 QueryString["action"] 来处理不同的事情:

当 action == "config" 时,将 config.json 的内容输出给客户端。

当 action == "uploadimage" 时,就是上传文件,将上传的文件用 context.Request.Files[0] 取出来,保存,记录到数据库,该干嘛干嘛,然后输出一个 JSON,UEditor 根据这个 JSON 插入图片到编辑器,这个 JSON 的格式是:

当 action == "listimage" 时,返回 JSON 格式类似如下:

说明:

一、建议在后端的判断要遵照 config.json 来,否则会造成一些不友好的体验,比如 config.json 中允许上传 .bmp,客户端 UEditor 遵守了,可是我们的 .ashx 文件不遵守,恰恰不允许上传 .bmp,这个体验就不友好了。

二、多图上传时,客户端并不是把所有文件一并提交,而是传完一个再传一个,所以对于 .ashx 来说,它和单图上传是一回事。

三、我希望客户端 UEditor 将 UEditor 所在的网页的 URL 通过 UrlReferrer 传过来,以便获得我们需要的一些额外参数,可是非常遗憾,单图上传时这个为 null,多图上传时这个是多图上传框(这是一个单独的 html 网页)的网址。等于说客户端只会传 action 和文件上来,如果需要更多参数,只能曲线解决了。

更多请参见:http://fex.baidu.com/ueditor/#dev-request_specification

相关文章