Question

我尝试使用路由构建一个简单的节点应用程序，但由于无法发布，因此会出现404网络错误。有人可以指出我的错误并纠正它吗？

首先我创建了一个目录sampProj，然后在其中，我有一个文件 - appl.js 和一个目录 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");
});

路由/ 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后，会显示一个带有一个文本输入的表单，但是如果我提交数据，它会重定向到localhost：3000，并显示错误404屏幕。

如果您对此进行了投票，请告诉我您为何会这样做，并以何种方式改进这个问题。

Answer 1

您可以通过以下网址访问该表单：

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

正确？在mainCode/server.js中，您为同一网址设置了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">

据我了解。通常，如果您想将公式发送到同一个网址，您只需将action属性保留为：

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

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

但由于OP想要首先提交文件，他必须将body-parser模块与multer交换，然后再将enctype设置为multipart/form-data。

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

如何在包含路由的nodejs应用程序中发布表单数据？

1 个答案: