node.js - 表单发布使 req.body.[输入名称] 未定义

Question

我查看了我的代码，但似乎找不到问题。当我提交表单时，我希望表单发布到同一页面“/admin”。为了测试这一点，我让 app.post("/admin",...) console.log 来自表单输入的相应 req.body 值。但是，表单的每个输入的每个 console.log 都会产生“未定义”。我似乎找不到问题。

HTML 表单

<form class="col s12" method="post" action="/admin" enctype="multipart/form-data">
                        <div class="row">
                            <div class="input-field col s12">
                                <input name="eventname" id="event_name" type="text" class="validate">
                                <label for="event_name">Event Name</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input name="location" id="location" type="text" class="validate">
                                <label for="location">Location</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12 m6">
                                <input name="date" type="date" id="createdate" class="validate">
                                <label for="createdate">Date</label>
                            </div>
                            <div class="input-field col s6 m3">
                                <input name="starttime" id="createstart" type="text" class="validate timepicker">
                                <label for="createstart">Start Time</label>
                            </div>
                            <div class="input-field col s6 m3">
                                <input name="endtime" id="createend" type="text" class="validate timepicker">
                                <label for="createend">End Time</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input name="eventleader" id="eventleader" type="text" class="validate">
                                <label for="eventleader">Event Leader</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input name="eventleadernumber" id="eventleaderno" type="text" class="validate">
                                <label for="eventleaderno">Event Leader Contact No.</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input name="attendee" id="attendeequota" type="text" class="validate">
                                <label for="attendeequota">Attendee Quota</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input name="email" id="email" type="email" class="validate">
                                <label for="email">Email</label>
                            </div>
                        </div>
                        <div class="file-field input-field">
                            <div class="btn">
                                <span>File</span>
                                <input type="file">
                            </div>
                            <div class="file-path-wrapper">
                                <input id="uploadposter" class="file-path validate" type="text">
                                <label for="uploadposter">Upload Poster Image File</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col s12">
                                <div class="row">
                                    <div class="input-field col s12">
                                        <textarea name="description" id="eventdescr" class="materialize-textarea"></textarea>
                                        <label for="eventdescr">Event Description</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button onclick="submitted()" type="submit" value="Submit" class="modal-close waves-effect waves-green btn-small right">Create Event</button>
                        </div>
                    </form>

Express Route（所有console.log都打印出“未定义”）

app.post('/admin', function(req, res) {
    console.log(req);
    console.log("Event Name:" + req.body.eventname)
    console.log("Location:" + req.body.location)
    console.log("Date:" + req.body.date)
    console.log("StartTime:" + req.body.starttime)
    console.log("EndTime:" + req.body.endtime)
    console.log("EventLeader:" + req.body.eventleader)
    console.log("EventLeaderNumber:" + req.body.eventleadernumber)
    console.log("Attendee:" + req.body.attendee)
    console.log("Email:" + req.body.email)
    console.log("Description:" + req.body.description)
})

标签： node.jsformsexpresspost

Answer 1

您在表单中将数据作为 Formdata 传递enctype="multipart/form-data">

鉴于您正在使用body-parser ，删除它可以解决您的问题。

或者

如果您想走这multipart条路线，请考虑使用multer或busboy之类的模块- 使用 multer 很容易。

使用 multer 编写代码

var express = require('express');
var app = express();
var multer  = require('multer');
var upload = multer();
app.post('/admin', upload.none(), function(req, res) {
    console.log(req);
    console.log("Event Name:" + req.body.eventname)
    console.log("Location:" + req.body.location)
    console.log("Date:" + req.body.date)
    console.log("StartTime:" + req.body.starttime)
    console.log("EndTime:" + req.body.endtime)
    console.log("EventLeader:" + req.body.eventleader)
    console.log("EventLeaderNumber:" + req.body.eventleadernumber)
    console.log("Attendee:" + req.body.attendee)
    console.log("Email:" + req.body.email)
    console.log("Description:" + req.body.description)
});