Javascript 如何在带有路由的nodejs应用程序中发布表单数据？_Javascript_Node.js_Forms_Express_Routes

Javascript 如何在带有路由的nodejs应用程序中发布表单数据？

javascript node.js forms express routes

Javascript 如何在带有路由的nodejs应用程序中发布表单数据？,javascript,node.js,forms,express,routes,Javascript,Node.js,Forms,Express,Routes,我试图构建一个带有路由的简单节点应用程序，但由于无法发布，它出现了404网络错误。有人能指出我的错误并改正吗首先我创建了一个目录sampProj，然后在其中有一个文件-appl.js和一个目录routes。在routes目录中，我有一个目录routes和一个文件main.js。同样在mainCode目录中，我有3个文件——main.js、server.js和index.html 对于复杂的方向，我很抱歉，我想测试一下小的，然后开始构建它。我想提到的是，这段代码只包含server.js和inde

我试图构建一个带有路由的简单节点应用程序，但由于无法发布，它出现了404网络错误。有人能指出我的错误并改正吗

首先我创建了一个目录sampProj，然后在其中有一个文件-appl.js和一个目录routes。在routes目录中，我有一个目录routes和一个文件main.js。同样在mainCode目录中，我有3个文件——main.js、server.js和index.html

对于复杂的方向，我很抱歉，我想测试一下小的，然后开始构建它。我想提到的是，这段代码只包含server.js和index.html，没有路由，即server.js使用app.post和app.get等，而不是我在下面展示的相应路由器方法

下面是应用程序的代码：

appl.js：

var express = require('express');
var bodyParser = require('body-parser');

var app = module.exports.app = express();

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false}));

// parse application/json
app.use(bodyParser.json());

// Adding routes
var server = require(__dirname + '/routes/main');
var mainCode = require(__dirname + '/routes/mainCode/main.js');

app.use('/Service', server);
app.use('/Service/mainCode', mainCode);

// Catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

/* Error Handlers */
// It will print the Stacktrace of error
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.send({
      message: err.message,
      error: err
    });
  });
}

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

routes/main.js：

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    res.send('<code>Welcome to Service</code>');
});

module.exports = router;

mainCode/main.js：

var express = require('express');
var router = express.Router();
var server = require(__dirname + '/server');
router.use('/server', server);
module.exports = router;

mainCode/index.html

<html>
  <head>
    <title>Form Data</title>
 </head>
  <body>
      <form id="uploadForm" enctype="multipart/form-data" action="/" method="post">
      <input id = "userPhotos" type="file" name="userPhotos" multiple />
      <input type='text' id='random' name='random'><br>
      <input type="submit" value="Upload" name="submit">
    </form>
  </body>
</html>

一旦我在浏览器中打开localhost:3000/Service/mainCode/server，就会显示一个带有文本输入的表单，但是如果我提交数据，它就会重定向到localhost:3000，屏幕上会显示错误404

如果您对此投反对票，请告诉我您为什么这样做，以及我可以如何改进此问题。

您可以通过URL访问此表单：

http://localhost:3000/Service/mainCode/server

对吧?？在

mainCode/server.js

中，为同一URL设置

get

和

post

处理。那么，为什么要在表单提交时调用

mainCode/index.html

中的根目录：

 <form id="uploadForm" enctype="multipart/form-data" action="/" method="post">

应该是：

<form id="uploadForm" enctype="multipart/form-data" action="/Service/mainCode/server" method="post">

据我所知。通常，如果要将公式发送到同一URL，只需保留action属性，如下所示：

<form id="uploadForm" enctype="multipart/form-data" method="post">

EDIT:结果表明，它解决了OP的问题，同时删除了属性

enctype

，从而产生了默认的

application/x-www-form-urlencoded

方法

但是，由于OP首先要提交一个文件，他必须将

主体解析器

模块与

multer

交换，并再次将

enctype

设置为

多部分/表单数据

multer的文件：

日志已发布，但req.body正在打印-{}您可以尝试：app.use（bodyParser.urlencoded（{extended:true}））；除了在appl.js中传递false之外，您还可以尝试删除客户端代码中的enctype属性，比如：是的，我在尝试上载文件时保留了它，但后来删除了它，以查看它是否至少适用于普通文本输入。是的，在我将enctype更改为application/x-www-form-urlencoded后，它工作了，扩展：true不需要

<form id="uploadForm" enctype="multipart/form-data" method="post">