node.js kindeditor上传图片

首先要搞清楚图片上传的原理

1.客户端读取文件，获取图片详情。
2.客户端将图片转换为利于传输的格式（数据流），包括图片各种参数。
3.服务器接收到数据流，再转换成.jpg/.png等格式的图片，写入服务器某个文件夹。
4.返回该地址，并显示到页面中。

其中的难点，就在于客户端接收数据的处理方式。
还有传回页面的文件地址。

现在要讨论的是以：node.js kindeditor上传图片为例。

1 .首先是：前端–客户端

<link rel="stylesheet" href="../themes/default/default.css" />
<script charset="utf-8" src="../kindeditor-min.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script>
    var options = {
        height:"600px",   //规定高度
        width:"550px",    //规定宽度
        uploadJson: '/uploadImg',   //规定服务端处理的路由地址
        allowImageUpload : true,     //是否允许本地上传图片
        items : [
            'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic',
            'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright',    'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link'],       //各种可显示的图标
        resizeType:0                 //是否可以拖动
    };
    KindEditor.ready(function(K) {
        window.editor = K.create('#editor', options);
    });
</script>
//用于显示的富文本框，id需要对应设置的editor
<textarea name="post" id="editor" name="content" placeholder="请输入内容" ></textarea>

options其他详细参数可以参考:http://kindeditor.net/docs/option.html

2.然后是：后端–服务端（node.js）

这里使用的是express的post方法作为路由
也可以使用如原生router作为路由,出门左拐,baidu
路由地址为: /uploadImg

var formidable=require('formidable');
app.post('/uploadImg',function(req,res,next){
        var form=new formidable.IncomingForm();
        form.keepExtensions=true;     //设置该属性为true可以使得上传的文件保持原来的文件的扩展名。
        form.uploadDir=__dirname+'/../public/upload';   //设置上传文件存放的文件夹，默认为系统的临时文件夹，可以使用fs.rename()来改变上传文件的存放位置和文件名
        //form.parse(request, [callback]) 该方法会转换请求中所包含的表单数据，callback会包含所有字段域和文件信息
        form.parse(req,function(err,fields,files){
            if(err){
                throw err;
            }
            var image=files.imgFile;  //这是整个files流文件对象,是转换成有利于传输的数据格式
            var path=image.path;      //从本地上传的资源目录加文件名:如E:\\web\\blog\\upload\\upload_0a14.jpg
            /*下面这里是通过分割字符串来得到文件名*/
            var arr=path.split('\\');//注split可以用字符或字符串分割
            var name=arr[arr.length-1];
            /*上面这里是通过分割字符串来得到文件名*/
            var url="/upload/"+name;
            console.log(url);
            var info = {
                "error": 0,
                "url": url
            };
            //info是用来返回页面的图片地址
            res.send(info);
        })
    })

参考：关于 Node.js的Formidable模块的使用

效果图：