ueditor.png
官網(wǎng)沒有提供node版本，在node環(huán)境下使用時(shí)，雖然基礎(chǔ)功能不會(huì)受到影響，但是在node中實(shí)現(xiàn)圖片上傳功能，需要進(jìn)行一些設(shè)置才能夠生效。
比如配置項(xiàng)：imagePathFormat：/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}
這個(gè)配置項(xiàng)要實(shí)現(xiàn)的功能是：指定上傳圖片時(shí)的路徑，且該路徑會(huì)根據(jù)時(shí)間自動(dòng)創(chuàng)建文件夾，參數(shù)介紹了format的自動(dòng)性和美妙實(shí)現(xiàn)，但是這個(gè)是需要基于后端來實(shí)現(xiàn)的，由于官網(wǎng)中沒有指出，容易在使用中迷惑。
要實(shí)現(xiàn)node環(huán)境下的圖片上傳，需要以下幾個(gè)步驟。
1.配置config.json：
在前端文件中配置一個(gè)config.json,放到ueditor目錄下就可以。這個(gè)config.json的內(nèi)容官網(wǎng)上有提供，我把我使用的給粘過來。
{
"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.實(shí)現(xiàn)請(qǐng)求config.json的方法：
請(qǐng)求的路徑，以使用我站點(diǎn)的地址進(jìn)行一個(gè)示例，應(yīng)該一看就明白了。
路徑示例：http://www.lovejavascript.com/ueditor?action=config&&noCache=1472380163761
沒錯(cuò)，這個(gè)鏈接所請(qǐng)求到的正是步驟一中所配置的config.json。
不過有些不理解為什么config需要通過ajax去動(dòng)態(tài)獲取，而且找不到配置這個(gè)ajax的地方。
下面是在ueditor中發(fā)起請(qǐng)求的源碼：
/**
* 根據(jù)action名稱獲取請(qǐng)求的路徑
* @method getActionUrl
* @remind 假如沒有設(shè)置serverUrl,會(huì)根據(jù)imageUrl設(shè)置默認(rèn)的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 '';
}
}
源代碼看一下就好，具體要做的其實(shí)就是下面這一些代碼，在nodejs中接收config請(qǐng)求，并將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.接收?qǐng)D片上傳請(qǐng)求
上面config.json中的參數(shù)[imageActionName:'uploadimage']就是用來設(shè)定圖片上傳的請(qǐng)求地址。根據(jù)這個(gè)地址，進(jìn)行上傳文件操作的編碼就可以了。代碼如下：
// 上傳圖片
uploadimage: function (req, res) {
var form = new formidable.IncomingForm();
var picPath = ueditorConfig['imagePathFormat'] + new Date().format('YYYYMMDD') + '/';
_common_.existsSyncPath('.' + picPath);
//設(shè)定上傳文件路徑
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();
});
}
需要注意的是后端接收?qǐng)D片的方式是:formData，且成功后需要按下面規(guī)則返回：
JSON.stringify({
"originalName": filename,
"name": newFilename,
"url": '/uploads/' + newFilename,
"type": ext,
"size": filesize,
"state": "SUCCESS"
})
