如何使用路由在nodejs应用程序中发布表单数据?

我尝试使用路由来构build一个简单的节点应用程序,但是由于无法发布,它提供了404networking错误。 有人可以指出我的错误,并纠正它?

首先我创build了一个目录sampProj,然后在其中,我有一个文件 – appl.js和一个目录路由 。 在路由目录内,我有一个目录路由和一个文件main.js。 再次在mainCode目录中,我有3个文件 – main.js,server.js和index.html。

对不起,复杂的方向,我想testing一下,然后开始build设。 我想提一下,这个只有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"); }); 

路线/ 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> 

mainCode / server.js:

 var express = require("express"); var router = express.Router(); var multer = require('multer'); var storage = multer.diskStorage({ destination: function (req, file, callback) { callback(null, './uploads/'); }, filename: function (req, file, callback) { callback(null, file.fieldname + '-' + file.originalname); } }); var upload = multer({ storage : storage }).any(); router.get('/',function(req,res){ res.sendFile(__dirname + "/index.html"); }); router.post('/',function(req,res){ console.log("posted"); console.log("posted"); console.log(req.body); upload(req,res,function(err) { if(err) { console.error(err); return res.end("Error uploading file."); } console.log(req.body); console.log(req.files); res.end("File is uploaded"); }); }); module.exports = router; 

一旦我在浏览器中打开localhost:3000 / Service / mainCode / server,一个表单将显示一个文本input,但是如果我提交数据,它会redirect到localhost:3000,并在屏幕上显示错误404。

如果你不满意,请告诉我为什么你这样做,以什么方式改善这个问题。

您通过url访问表单:

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

对? 在你的mainCode/server.js你设置getpost处理同一个URL。 那么为什么你在表单提交时在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"> 

编辑:原来,它解决了OP的问题,结合删除属性enctype ,这导致默认的application/x-www-form-urlencoded方法。

但是由于OP想要首先提交一个文件,所以他必须用multer交换body-parser模块, multer enctype再次设置为multipart/form-data

multer文档: https : //github.com/expressjs/multer