Summernote 图片 + Node.js (Express.js)

Question

There are too many solutions out there of how Summernote file-upload can be handled in PHP side, but I couldn't find a single decent solution out there which shows how it can be handled in Node.js.

My Javascript

$(document).ready(function() {
    // $('#summernote').summernote();

    $('#summernote').summernote({
        height: 590,   
        focus: true,
        callbacks: {                                        
            onImageUpload : function(file, editor, welEditable) {
                saveFile(file[0], editor, welEditable);
            }
        }                                
    });

    function saveFile(file, editor, welEditable){
        console.log(file)
        data = new FormData();
        data.append("file", file);
        $.ajax({
            data: data,
            type: "POST",
            url: "/save/wiki",
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                console.log(url)
                editor.insertImage(welEditable, url);
            }
        });
    }
});

app.js

var express     = require('express');
var bodyParser  = require('body-parser');
var multer      = require('multer');
var path        = require('path');
var app         = express();


var jsonPrsr = bodyParser.json();                                        
var urlencodedPrsr = bodyParser.urlencoded({ extended: false });         
var routes = require('./routes')(app, jsonPrsr, urlencodedPrsr, multer); 
var port = process.env.PORT || 1337;                                     


app.listen(port, function(err){
    if(err){
        console.log("Server failed to start on port: "+port+". Description: ");
        console.log(err);
    }else console.log(port+'is ON')
});

routes.js

module.exports = function(app, jsonParser, urlencodedParser, multer) {
    app.post('/save/wiki', urlencodedParser, function(req, res){
        if( typeof req.body != 'undefined' )
            console.log(req.body); // THIS RETURNS {} ie. empty
        var file_name = req.body.file;
        var upload, 
            upload_destination = './public';
            storage = multer.diskStorage({                                  
                 destination: function (req, file, callback) {
                     callback(null, upload_destination);
                  },
                  filename: function (req, file, callback) {
                      callback(null, file.fieldname + '-' +Date.now());
                  }
             });

        upload = multer({ storage : storage}).single(file_name);

        upload(req,res,function(err) {
            if(err) 
                res.send("Error uploading file.");
            else
                res.send("File is uploaded");
            res.end();
        });
    });
}

MY PROBLEM IS

The console.log(req.body); is returning empty object {}. There is no file.

I WANT

To upload the file triggered in Summernote editor to the directory './public'

Can anyone please tell me what is missing? Or where is it going wrong?

Thanks

Answer 1

Try this , some good working example of uploading files.

var express = require('express'),
    multer  = require('multer')

var app = express()
app.use(multer({ dest: './uploads/'}))

app.get('/', function(req, res){
  res.send('hello world');
});

app.post('/', function(req, res){
    console.log(req.body) // form fields
    console.log(req.files) // form files
    res.status(204).end()
});

app.listen(3000);