javascript - 如何使用 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 数据库？

$(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。