nodejs 整合kindEditor實作圖片上傳_node.js

kindEditor官網上中提供了ASP,ASP.NET,JSP相關的整合應用,http://kindeditor.net/docs/upload.html可以參考實作nodejs的整合,發現實用nodejs比較簡單

環境:
unbuntu 14.10
nodejs 0.10.35
express 4.11.2
formidable 1.0.16
kindEditor 4.1.10
webStorm 8

1.透過IDE或終端機建立一個名稱為test的工程

2.編輯package.json新增formidable依賴,這裡使用的是1.0.16版本,之後透過終端執行npm install完成依賴的安裝

3.將kindEditor整個目錄放到test/public/lib下

4.修改index.ejs和index.js檔
index.ejs中整合kindEditor:
       設定kindEditor的uploadJson為nodejs所提供的處理圖片上傳的路由url這裡用的是/uploadImg
index.js中新增處理圖片上傳的路由url:
       新增/uploadImg對應的post處理方式,
程式碼如下:

index.js

複製程式碼 程式碼如下:

 
   
   
     
     
      <script><br />           var options = {<br />               uploadJson: '/uploadImg'<br />           };<br />           KindEditor.ready(function(K) {<br />               window.editor = K.create('#editor', options);<br />           });<br />       </script>
 
 
   

    <br>         <strong>HTML內容</strong><br>    
 

index.js

複製程式碼 程式碼如下:

var express = require('express');
var router = express.Router();
var formidable = require('formidable');
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: '圖片上傳' });
});
router.post('/uploadImg', function(req, res, next) {
    var form = new formidable.IncomingForm();
    form.keepExtensions = true;
    form.uploadDir = __dirname '/../public/upload';
    form.parse(req, function (err, fields, files) {
        if (err) {
            throw err;
        }
        var image = files.imgFile;
        var path = image.path;
        path = path.replace('/\/g', '/');
        var url = '/upload' path.substr(path.lastIndexOf('/'), path.length);
        var info = {
            "error": 0,
            "url": url
        };
        res.send(info);
    });
});
module.exports = router;

之後透過IDE或終端啟動test工程,透過http://localhost:3000存取頁面就可以上傳圖片了