如何使用Node.js服务器将我的图像数据从前端保存到Mongoose数据库

Question

我有一个后端使用node.js和一个前端使用jquery，javascript，ajax和bootstrap。我想从前端上传图像并将其保存到mongoose数据库。此处文件已成功加载，图片将位于名为 / public / img 的位置。但是如何使用API​​调用将这些图像信息保存到数据库中 以下是我的代码：

后端代码Node.js，Mongoose

/server.js

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

var app = express();
   app.appname="photogallery";

//config mongoose
  app.db = mongoose.createConnection('localhost/'+app.appname);
  app.db.on('error', console.error.bind(console, 'mongoose connection error: '));
  app.db.once('open', function () {
  //Storage is all good
  });

//Routes and acl
  var router = express.Router();
  require('./routes')(app, router, passport);

var file_url = '';

var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, 'public/img/');
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname + '-' + Date.now());
     file_url = file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]
  callback(null, file_url);
  }
});

var upload = multer({ storage : storage}).single('userPhoto');

app.use(express.static(path.join(__dirname, '/public/')));

app.post('/api/photo',function(req,res){
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
       // res.end("File is uploaded");
      res.json({error_code:0,err_desc:null,file_url:'img/'+file_url});
      /*Now I want to save this file_url to image_url using api /api/photoGallery, please help me to save these information to the db */ 
    });
});

//config express
  app.set('secret','thisshouldnotbeinplaintext');
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(bodyParser.json());
  app.use(passport.initialize());
  app.use(router);


app.listen(5050,function(){
    console.log("Working on port 5050");
});

/api/requests.js

'use strict';
  var passport = require('passport');
  var app = require('../app');

exports.init = function(pp) {
    passport = pp;
    app = pp;
    return exports;
};

exports.root = function(req, res) {
    res.send("Running");
  };

//Add Image Data
exports.addData = function(req, res) {
  var addData = req.app.db.model('Data');
  var data = {  image_title  : req.body.image_title,
                image_url    : "http://localhost:5050/"+req.body.image_url
              }
  var query = addData(data);
  query.save(function(err){
    if(err){
      console.log(err.toString());
    }
  console.log('Image Saved Successfully');
  res.json({ success: true });
 });
};

/schema/Data.js

'use strict';

exports = module.exports = function(app, mongoose) {
    var dataSchema = new mongoose.Schema({
        image_title  :  { type: String, unique: true,  lowercase: true },
        image_url    :  { type: String, unique: true,  lowercase: true }
    });
    app.db.model('Data', dataSchema);
};

/models.js

'use strict';

module.exports = function(app, mongoose) {
    //Mongoose Schemas
    require('./schema/Data')(app, mongoose);
};

/routes.js

 'use strict';

module.exports = function(app, router, passport) {

    var requests = require('./api/requests').init(passport);
    router.get('/', requests.root);

    router.post('/api/addPhoto/v1', requests.addData);
    router.get('/api/getPhoto/v1', requests.getPhoto);

};

例如Json将如下所示

{
   image_title: exampleImage,
   image_url: xyzscjnscncsl.exampleImage.png
}

前端代码Jquery，JavaScript，Ajax，HTML

/public/index.html

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Please Upload Image</h4>
            </div>
            <form id="uploadForm" enctype="multipart/form-data" action="/api/photo" method="post">
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" class="form-control" id="imagetitle" placeholder="Image Title">
                </div>
                 <div class="form-group">
                     <input type="file" class="form-control" id="input-image" name="userPhoto" accept="image/*">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancle</button>
                <button type="submit" class="btn btn-default" value="Upload Image" name="submit">Save</button>
            </div>
                <span id = "status"></span>
            </form>
        </div>
    </div>
</div>

/public/javascript/image.js

如何使用API​​调用将图像数据从此处保存到mongoose db？

$(document).ready(function() {
    $('#uploadForm').submit(function() { 
        $("#status").empty().text("File is uploading...");
        $(this).ajaxSubmit({
            error: function(xhr) {
                status('Error: ' + xhr.status);
            },
            success: function(response) {
                console.log(response)
                $("#status").empty().text(response);
            }
        });
        return false;
    });    
});

Answer 1

我不建议大多数项目（如Paul所评论的那样），但并不复杂。

从客户端获取图像文件后，您将读取图像数据（fs.readFile）并使用缓冲区将其编码为base64并保存到您的数据库中，这样您将使用更少的空间来存储数据。然后在需要二进制文件时解码base64数据。

fs.readFile('foo.png', function(err, data) {
   const base64img = new Buffer(data).toString('base64');
});

有一些npm模块可以使它更简单，例如 base64-img 。

Answer 2

我建议您使用busboy而不是multer，因为multer保存到磁盘，并且busboy返回一个流，您可以将其传输到任何您想要的流（甚至是mongoDB）。

Gridfs-stream是使用gridfs功能将数据流式传输到mongoDB的好模块。

以下是它们的基本用法：

@ViewChild(NgForm)

Answer 3

/ *这是解决方案* /

/server.js

var express =   require("express");
var multer  =   require('multer');
var path = require('path');
var passport = require('passport');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');



var app = express();
app.appname="photogallery";

//config mongoose
app.db = mongoose.createConnection('localhost/'+app.appname);
app.db.on('error', console.error.bind(console, 'mongoose connection error: '));
app.db.once('open', function () {
});


//config data models
require('./models')(app, mongoose);

//Routes and acl
var router = express.Router();
require('./routes')(app, router, passport);

/* Image Logic */
var file_url = '';
var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, 'public/img/');
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname + '-' + Date.now());

      file_url = file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.')[file.originalname.split('.').length -1];
      callback(null, file_url);
  }
});

var upload = multer({ storage : storage}).single('userPhoto');

app.use(express.static(path.join(__dirname, '/public/')));

app.post('/api/photo',function(req,res){
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        //res.end("File is uploaded");
        //console.log("file_url", file_url);
        res.json({error_code:0,err_desc:null, file_url:'img/'+file_url});
    });
});

//config express
app.set('secret','thisshouldnotbeinplaintext');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(passport.initialize());
app.use(router);

app.listen(5050,function(){
    console.log("Working on port 5050");
});

/api/requests.js

    'use strict';

    var jwt = require('jsonwebtoken');
    var passport = require('passport');

    exports.init = function(pp) {
        passport = pp;
        return exports;
    };

    exports.root = function(req, res) {
        res.send("Running");
    };

/* Save Image Data Function */

    exports.addData = function(req, res) {
        var addData = req.app.db.model('Data');
        var data = {
            img_title   : req.body.img_title,
            img_url     : "http://localhost:5050/"+req.body.img_url
        }
        var query = addData(data);
        query.save(function (err, data) {
            if (err) {
                console.log(err.toString());
            } else {
                console.log('Image saved Successfully');
                res.json(data);
            }
        });
    };

/* Get Image Data Function */
    exports.getPhoto = function(req, res) {
            var getPhoto = req.app.db.model("Data");
            var query = getPhoto.find(function(err, data){
                if(err) {
                    console.log("Not Found");
                } else  {
                    res.json({'data': data});
                }
            });
        };

/schema/Data.js

'use strict';

module.exports = function(app, mongoose) {
    var dataSchema = new mongoose.Schema({
        img_title        : { type: String, default: '' },
        img_url          : { type: String, default: '' }

    });
    app.db.model('Data', dataSchema);
};

/models.js

'use strict';

module.exports = function(app, mongoose) {
    //Mongoose Schemas
    require('./schema/Data')(app, mongoose);
}

/routes.js

'use strict';

module.exports = function(app, router, passport) {

    var requests = require('./api/requests').init(passport);
    router.get('/', requests.root);

    router.post('/api/addPhoto/v1', requests.addData);
    router.get('/api/getPhoto/v1', requests.getPhoto);

};

/public/index.html

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Please Upload Image</h4>
            </div>
            <form id="uploadForm" enctype="multipart/form-data" action="/api/photo" method="post">
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" class="form-control" id="imagetitle" placeholder="Image Title">
                </div>
                 <div class="form-group">
                     <input type="file" class="form-control" id="input-image" name="userPhoto" accept="image/*">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancle</button>
                <button type="submit" class="btn btn-default" value="Upload Image" name="submit">Save</button>
            </div>
                <span id = "status"></span>
            </form>
        </div>
    </div>
</div>

/public/javascript/image.js

/ *如何使用api调用* /

将图像数据从前端保存到猫鼬

$(document).ready(function() {
     $('#uploadForm').submit(function() {
         $("#status").empty().text("File is uploading...");
         var imageTitle = $("#imagetitle").val();
        $(this).ajaxSubmit({

            error: function(xhr) {
                    status('Error: ' + xhr.status);
            },

            success: function(response) {
                var localFile = response.file_url;
                $.ajax({
                    url: "/api/addPhoto/v1",
                    data: {
                        img_title: imageTitle,
                        img_url: localFile
                    },
                    method: 'post',
                    dataType: 'json',
                    success: function(data) {
                        var html = "";
                            html+= "<div class='col-md-3 col-md-offset-1'>";
                            html+= "<div class='img-box imgClass'>";
                            html+= "<img src='"+data.img_url+"'>";
                            html+= "</div> </div>";
                        $('.myimage').append(html);
                        $('#myModal').modal('hide');

                    },
                    error: function(xhr, status) {
                        alert("Sorry, there was a problem!");
                    }
                });
            }
         });
       return false;
    });

 });

 $(function(){
     $.get("/api/getPhoto/v1", function(response) {
         //console.log(response.data.length);
         var html = "";
         for(var i = 0; i< response.data.length ; i++){
                html+= "<div class='col-md-3 col-md-offset-1'>";
                html+= "<div class='img-box imgClass'>";
                html+= "<img src='"+response.data[i].img_url+"'>";
                html+= "</div> </div>"
         }
         $('.myimage').html(html);
     });

 });