将数据插入 MongoDB 并使用 enctype="multipart/form-data" 上传图像问题答案

【问题标题】：Insert data into MongoDB and upload image issue with enctype="multipart/form-data"将数据插入 MongoDB 并使用 enctype="multipart/form-data" 上传图像问题
【发布时间】：2018-02-19 10:00:23
【问题描述】：

我正在制作小型上传图像并将数据（名称、图像）插入 mongoDB。我使用 multer 和 express 上传图片

我遇到了一个错误。当我在 HTML 表单上添加 enctype= multipart/form-data 时。我的应用程序只能上传图片，但不能将数据（姓名、电子邮件）插入 mongoDB。当我删除它时，我的应用程序只插入数据但不能上传图像。

我在谷歌上搜索了很多次，但无法解决。

我的服务器.js

var multer  =   require('multer');
var express = require('express');
var http = require('http');
var path = require('path');
var mongoose = require('mongoose');
var app = express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
const {ObjectID} = require("mongodb");
app.set('views',__dirname + '/views');
app.set('view engine','jade');

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

mongoose.connect('mongodb://localhost:27017/test');
var mySchema = new mongoose.Schema({
    _id : String,
    name: String,
    email : String
});

var user = mongoose.model('face',mySchema);

app.post('/new',function(req,res){
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });

    new user({
    _id   :  new ObjectID(),
    name : req.body.name,
    email : req.body.email
}).save(function(err,doc){
    if(err) res.json(err);
    else    res.send('Successfully inserted!');
});
});
var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.originalname);
  }
});
var upload = multer({ storage : storage}).single('userPhoto');
app.get('/',function(req,res){
      res.sendFile(__dirname + "/index.html");
});
app.listen(3001,function(){
    console.log("Working on port 3001");
});

我的 HTML 代码

<html>
  <head>
    <title>File upload Node.</title>
  </head>
  <body>
    <form action ="/new" method = "POST" enctype="multipart/form-data">
      <input type="file" name="userPhoto" /><br/>
  <label for="name">Name: </label>
   <input type="text" name = "name" /><br/>
  <label for="email">Email:</label>
   <input type = "text" name = "email" /><br/>

   <input type = "submit" />
   </form>
  </body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
</html>

【问题讨论】：

标签： javascript node.js mongodb

【解决方案1】：

您在将数据保存到数据库之前做出响应。发送响应后首先上传图像并将数据保存在数据库中。我更正了您的代码如下-

var multer  =   require('multer');
var express = require('express');
var http = require('http');
var path = require('path');
var mongoose = require('mongoose');
var app = express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
const {ObjectID} = require("mongodb");
app.set('views',__dirname + '/views');
app.set('view engine','jade');

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

mongoose.connect('mongodb://localhost:27017/test');
var mySchema = new mongoose.Schema({
    _id : String,
    name: String,
    email : String
});

var user = mongoose.model('face',mySchema);

app.post('/new',function(req,res){
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
            new user({
             _id   :  new ObjectID(),
             name : req.body.name,
             email : req.body.email
           }).save(function(err,doc){
              if(err) res.json(err);
              else    res.send('Successfully inserted!');
           });
    });


});
var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.originalname);
  }
});
var upload = multer({ storage : storage}).single('userPhoto');
app.get('/',function(req,res){
      res.sendFile(__dirname + "/index.html");
});
app.listen(3001,function(){
    console.log("Working on port 3001");
});

【讨论】：