Nodejs环境配置UEditor，并实现图片上传阿里OSS
UEditor编辑器为百度公司出的一款功能强大的网页在线富文本编辑器，只需简单配置一下就可以使用。
阿里云存储OSS为阿里云推出的一款安全可靠的云存储服务，目前也受到了大部分企业的喜爱。
阿里云存储OSS有着详细的各种语言的API文档让我们使用起来更加得心应手，在这里我们不得不佩服阿里强大的技术力量；相比之下百度的UEditor编辑器的API就显得逊色好多，nodejs作为现在流行的开发语言之一，在他们官网居然找不到相关的图片上传文档。下文我们来给各位介绍在Nodejs环境配置UEditor文件图片上传到阿里OSS的操作方法，希望这个例子能够为大家带来一些帮助。
一、首先引入UEditor的相关文件
<script src="/js/t/ueditor/ueditor.config.js"></script>
<script src="/js/t/ueditor/ueditor.all.js"></script>
<script src="/js/t/ueditor/lang/zh-cn/zh-cn.js"></script>
二、前端配置：新建自己的js文件main.js，并配置自己想要的功能
（很多人都直接在UEditor的ueditor.config.js中改config，我个人习惯在插件以外改）
var ue = UE.getEditor('ueditor',{
serverUrl : "/ueditor",
toolbars: ["自定义的工具栏，默认为所有"],
imagePathFormat: "/upload",
elementPathEnabled: false,
maximumWords :20000,
autoHeight: false
})
这里根据自己的需求去配置，官网有具体的说明，就不再讲解了，要注意一下的是 serverUrl（服务端请求地址，主要用于获取图片上传的一些参数）和 imagePathFormat(指定文件上传路径和返回路径)具体看官方文档
在编辑器实例化完毕后才可以设置或者获取编辑内容
ue.ready(function(){
this.setContent("设置内容");
获取内容
var content = this.getContent();
})
三、后端配置：在服务端创建请求路径 /ueditor 即config中设置的serverUrl参数的请求路径
在初始化时会get的方式向 serverUrl 发起获取后端配置的请求并带有一个action=config的参数，action参数值包括config（配置文件）、uploadimage（图片上传）、listimage（在线管理）、catchimage（抓取图片），所以只需要重写这4个请求就基本上实现了我们的需求。
请求处理代码如下
请求参数
GET {"action": "config"}
POST "upfile": File Data
返回格式
// 需要支持callback参数,返回jsonp格式
{
"imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",
"imagePath": "/ueditor/php/",
"imageFieldName": "upfile",
"imageMaxSize": 2048,
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
}
到了这里没意外的话刷新页面就会出现你所配置的编辑器了
四、服务端接收前端图片上传数据，并上传到阿里OSS
到了最重要的一步，这里用到的中间件有（co-busboy，path，ali-oss）
首先要设置ali-oss的相关参数
var parse = require('co-busboy');
var oss = require('ali-oss')
var part;
var filename;
var buffers = [];
var nread = 0;
var aliyunOss = {};
var bucket = config.bucket,
key = config.key,
domain = config.domain,
dir = config.dir;
var store = oss({
accessKeyId: config.accesskeyid,
accessKeySecret: config.accesskeysecret,
bucket: config.bucket,
region: 'oss-cn-shanghai'
});
解析接收数据
var parts = parse(this, {
// only allow upload `.jpg` files
checkFile: function (fieldname, file, filename) {
if(_.indexOf(filterPicture,path.extname(filename))===-1){
var err = new Error('invalid jpg image')
err.status = 400
return err;
}
}
})
抓取必要信息，并推送到ali-oss
function random_string(len) {
len = len || 32;
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = chars.length;
var pwd = '';
for (i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
function get_suffix(filename) {
pos = filename.lastIndexOf('.')
suffix = ''
if (pos != -1) {
suffix = filename.substring(pos)
}
return suffix;
}
while (part = yield parts) {
if (part.filename){
filename = part.filename
}
if (filename){
suffix = get_suffix(filename);
o_filename = dir + random_string() + suffix
}
if (part.mimeType) {
ctype = part.mimeType;
};
console.log(part)
if (part._readableState.length) {
csize = part._readableState.length;
};
if(filename){
console.log(o_filename,csize,ctype)
aliyunOss = yield store.put(o_filename, part, {
headers: {
'Content-Length': csize,
'Content-Type': ctype
}
});
// console.log(aliyunOss);
console.log('uploading %s -> %s');
}
}
上传oss完成，按照ueditor认识的格式返回信息
return {
"state": "SUCCESS",
"url": !!domain?domain+"/"+aliyunOss.name:aliyunOss.url,
"title": aliyunOss.name,
"original": o_filename
}
以上代码均为服务端的上传处理代码，需要根据自己的项目情况做调整。
