在node环境下配置ueditor图片上传

node,ueditor,nodejs

拭目以待 发布于


ueditor官网没有提供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"
})