ueditor.png
官网没有提供node版本，在node环境下使用时，虽然基础功能不会受到影响，但是在node中实现图片上传功能，需要进行一些设置才能够生效。
比如配置项：imagePathFormat：/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}
这个配置项要实现的功能是：指定上传图片时的路径，且该路径会根据时间自动创建文件夹，参数介绍了format的自动性和美妙实现，但是这个是需要基于后端来实现的，由于官网中没有指出，容易在使用中迷惑。
要实现node环境下的图片上传，需要以下几个步骤。
1.配置config.json：
在前端文件中配置一个config.json,放到ueditor目录下就可以。这个config.json的内容官网上有提供，我把我使用的给粘过来。
{
"imageActionName": "uploadimage",
"imageFieldName": "upfile",
"imageMaxSize": 2048000,
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"imageCompressEnable": true,
"imageCompressBorder": 1600,
"imageInsertAlign": "none",
"imageUrlPrefix": "",
"imagePathFormat": "/upload/ueditor/pic/",
"scrawlActionName": "uploadscrawl",
"scrawlFieldName": "upfile",
"scrawlPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
"scrawlMaxSize": 2048000,
"scrawlUrlPrefix": "",
"scrawlInsertAlign": "none",
"snapscreenActionName": "uploadimage",
"snapscreenPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
"snapscreenUrlPrefix": "",
"snapscreenInsertAlign": "none",
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage",
"catcherFieldName": "source",
"catcherPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
"catcherUrlPrefix": "",
"catcherMaxSize": 2048000,
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"videoActionName": "uploadvideo",
"videoFieldName": "upfile",
"videoPathFormat": "/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",
"videoUrlPrefix": "",
"videoMaxSize": 102400000,
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],
"fileActionName": "uploadfile",
"fileFieldName": "upfile",
"filePathFormat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
"fileUrlPrefix": "",
"fileMaxSize": 51200000,
"fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
],
"imageManagerActionName": "listimage",
"imageManagerListPath": "/ueditor/php/upload/image/",
"imageManagerListSize": 20,
"imageManagerUrlPrefix": "",
"imageManagerInsertAlign": "none",
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"fileManagerActionName": "listfile",
"fileManagerListPath": "/ueditor/php/upload/file/",
"fileManagerUrlPrefix": "",
"fileManagerListSize": 20,
"fileManagerAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
]
}
2.实现请求config.json的方法：
请求的路径，以使用我站点的地址进行一个示例，应该一看就明白了。
路径示例：http://www.lovejavascript.com/ueditor?action=config&&noCache=1472380163761
没错，这个链接所请求到的正是步骤一中所配置的config.json。
不过有些不理解为什么config需要通过ajax去动态获取，而且找不到配置这个ajax的地方。
下面是在ueditor中发起请求的源码：
/**
* 根据action名称获取请求的路径
* @method getActionUrl
* @remind 假如没有设置serverUrl,会根据imageUrl设置默认的controller路径
* @param { String } action action名称
* @example
* ```javascript
* editor.getActionUrl('config'); //返回 "/ueditor/php/controller.php?action=config"
* editor.getActionUrl('image'); //返回 "/ueditor/php/controller.php?action=uplaodimage"
* editor.getActionUrl('scrawl'); //返回 "/ueditor/php/controller.php?action=uplaodscrawl"
* editor.getActionUrl('imageManager'); //返回 "/ueditor/php/controller.php?action=listimage"
*
*/
getActionUrl: function(action){
var actionName = this.getOpt(action) || action,
imageUrl = this.getOpt('imageUrl'),
serverUrl = this.getOpt('serverUrl');
if(!serverUrl && imageUrl) {
serverUrl = imageUrl.replace(/^(.*[/]).+([.].+)$/, '$1controller$2');
}
if(serverUrl) {
serverUrl = serverUrl + (serverUrl.indexOf('?') == -1 ? '?':'&') + 'action=' + (actionName || '');
return utils.formatUrl(serverUrl);
} else {
return '';
}
}
源代码看一下就好，具体要做的其实就是下面这一些代码，在nodejs中接收config请求，并将config.json返回：
// 获取配置文件
var ueditorConfig = require('../ueditor.config.json');//公共方法
config: function (req, res) {
res.writeHead(200, {"Content-Type": "text/json"});
res.write(JSON.stringify(ueditorConfig));
res.end();
}
3.接收图片上传请求
上面config.json中的参数[imageActionName:'uploadimage']就是用来设定图片上传的请求地址。根据这个地址，进行上传文件操作的编码就可以了。代码如下：
// 上传图片
uploadimage: function (req, res) {
var form = new formidable.IncomingForm();
var picPath = ueditorConfig['imagePathFormat'] + new Date().format('YYYYMMDD') + '/';
_common_.existsSyncPath('.' + picPath);
//设定上传文件路径
form.parse(req, function(error,fields,files){
var image = files[ueditorConfig.imageFieldName];
var fileName = image.name,
fileType = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase(),
newFilename = new Date().valueOf() + fileType;
var readStream = fs.createReadStream(image.path),
writeStream = fs.createWriteStream('.' + picPath + newFilename);
readStream.pipe(writeStream);
readStream.on('end',function(){
fs.unlinkSync(image.path);
});
var json ={
"originalName": fileName,
"name": newFilename,
"url": picPath + newFilename,
"type": fileType,
"size": image.length,
"state": "SUCCESS"
};
res.writeHead(200, {"Content-Type": "text/json"});
res.write(JSON.stringify(json));
res.end();
});
}
需要注意的是后端接收图片的方式是:formData，且成功后需要按下面规则返回：
JSON.stringify({
"originalName": filename,
"name": newFilename,
"url": '/uploads/' + newFilename,
"type": ext,
"size": filesize,
"state": "SUCCESS"
})
网友评论