javascript - Node.js Body-Parser 无法检索表单输入

标签 javascript node.js mongodb express body-parser

我正在尝试 console.log 来自表单的输入。但是,正文解析器对我尝试在终端上打印的输入显示“未定义”。我不确定我做错了什么。 请告知我做错了什么。谢谢。

HTML 格式

<html>
<header>
    <link rel="stylesheet" type="text/css" href="css/form.css">
</header>
<body>
<form id="form" class="topBefore" action="/form" method="post" enctype="multipart/form-data">
              <input id="name" name="name" type="text" placeholder="NAME">
              <input id="email" name="email" type="text" placeholder="E-MAIL">
              <textarea id="message" name ="message" type="text" placeholder="MESSAGE"></textarea>
              <input type="file" name="upload" multiple>
      <input id="submit" type="submit" value="GO!">  
    </form>
</body>
</html>

App.js

// port and modules
var port = 3000;
var express = require('express');
var http = require('http');
var path = require('path');
var formidable = require('formidable');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var fs = require('fs');
var app = express();
// static resource folder (public)
app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get('/form', function(req, res){
    res.sendFile(__dirname + "/public/form.html");
});

app.post('/form', function(req, res)
{   //get form input
    var name = req.body.name;
    var email = req.body.email;  
    var message = req.body.message;
    console.log(req.body.name);
    //upload file and save to directory
    var form = new formidable.IncomingForm();
    form.parse(req);  
    //set upload path
    form.on('fileBegin', function (name, file){
        file.path = __dirname + '/public/icons/' + file.name;
        console.log(file.path);
    });
    //upload process
    form.on('file', function (name, file){
        console.log('Uploaded ' + file.name);

    });
    // redirect to home page after form submission
    res.redirect('/');
});

// connect to server and listen port
// index.html will be home page
http.createServer(app).listen(port, function(){
    console.log("{ server connection : success }");
});

//Database setup
mongoose.connect('mongodb://localhost/mydb');
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
  console.log('{ database connection : success}');
});

最佳答案

如果您在 Node 中处理文件,bodyParser 将不起作用。

您的表单需要以下属性

<form action="/account/edit" method="post" enctype="multipart/form-data"></form>

在 Node 中你需要要求multer

var multer = require('multer');

// this is a simple reqex filter to check the ext
const imageFilter = (req, file, cb) => {
  let regex = new RegExp(/\.(jpg|jpeg|png|gif)$/, "i");
  // return error
  if (!file.originalname.match(regex)) {
    return cb(new Error('Only image files are allowed!'), false);
  }
  cb(null, true);
};

// define the destination
var storage = multer.diskStorage({
  destination: function(req, file, cb) {
    pathName = `photos/users/${req.user.dataValues.userid}`;
    var p = mkdirSync(pathName) // checks if photos/users exist
    if (p === false) {
      cb(true, null) // path does not exist
    } else {
      cb(null, pathName) // path exist
    }

  },
  filename: function(req, file, cb) {
    let regex = new RegExp(/\.(jpg|jpeg|png|gif|bmp)$/, "i"); 
    let filename = file.originalname;
    let ext_arr = filename.match(regex);
    let ext_str = ext_arr[0]; // get ext
    cb(null, `${Date.now()}${ext_str}`); // file name is date.ext
  }
})

// if no directory, make directory
const mkdirSync = (dirPath) => {
  try {
    fs.mkdirSync(dirPath) // try it without making anything
  } catch (err) {
    if (err.code !== 'EEXIST') {
      fs.mkdirSync("photos/users") // make directory
      try {
        fs.mkdirSync(dirPath) // try it now that users directory is made
      } catch (err) {
        if (err.code !== 'EEXIST') {
          return false;
        }
      }
    }
  }
}
// makes the directory
const checkUserdirSync = (dirPath) => {
  try {
    fs.mkdirSync(dirPath)
  } catch (err) {
    if (err.code !== 'EEXIST') throw err
  }
}

大部分代码是检查目录。

Multer 不会为您创建目录。

然后你需要把这些函数绑定(bind)到一个对象中

你必须告诉它要查找的字段名

const upload = multer({ fileFilter: imageFilter, storage: storage }).single("profile_pic");

这是我实际处理帖子的代码

// saves file to system
function handleProfilePictureUpload(req, res, next) {
  upload(req, res, function(err) {
    if (err) req["file"] = false;
    if (!req["file"]) req["file"] = false;
    next();
  })
}

大部分代码都是标准的,并用 multer 记录。我会查看 https://github.com/expressjs/multer如果您有任何问题。

关于javascript - Node.js Body-Parser 无法检索表单输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44766212/

相关文章:

javascript - express - 错误 : Can't set headers after they are sent

node.js - 在mongodb中保持原子性

javascript - 变量在 Angular $resource 函数的回调中突然变得未定义

mongodb - 如何创建具有可变日期的部分索引?

javascript - JQuery - 显示/隐藏带有 1 个按钮的 2 个 div 并更改按钮的值

javascript - 使用短路评估来定义变量

javascript - 模型更改时 AngularJS 不会更新 img src

javascript - 从 html 调用函数并从 angularjs 获取结果

javascript - 如何在 NODE js 函数中传递参数?

mongodb - 解析服务器 - 图像文件的路径返回 localhost