如何使用路由在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
你设置get
和post
处理同一个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