2016-09-14 7 views
1

私は経路で単純なノードアプリケーションを構築しようとしましたが、投稿できないので404ネットワークエラーが発生します。誰かが私の間違いを指摘して修正することができますか?nodejsアプリケーションにフォームデータをルートで投稿する方法は?

まず私は、ディレクトリsampProjを作成し、それに、私は、ファイルしました - appl.jsとディレクトリルートを。 ルートディレクトリ内には、ディレクトリルートとファイルmain.jsがあります。 mainCodeディレクトリの中に、main.js、server.js、index.htmlという3つのファイルがあります。

ご迷惑をおかけして申し訳ございませんが、私は小さなものを試してみることにしました。 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; 
だからここ

は、アプリケーションのコードです

メインコード/ 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 /サービス/ mainCode /サーバは、フォームが1つのテキスト入力と表示されますが、 localhost:3000にリダイレクトされ、画面にエラー404が表示されます。

これをダウンホートすると、その理由を教えてください。どのような方法で改善することができますか?

答えて

0

あなたは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にformularを送信する場合 は、通常のようにアウト属性:

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

EDIT:は、それがの除去と組み合わせたOPのための問題を解決したことが判明属性enctypeは、デフォルトのapplication/x-www-form-urlencodedメソッドにつながります。

しかし、OPが最初の場所でファイルを送信したいと、彼は multerbody-parserモジュールを交換し、再び multipart/form-dataから enctypeを設定する必要がありました。 multerの

ドキュメント: https://github.com/expressjs/multer

+0

それがログインしていますが投稿さが、req.bodyが印刷される - {} – user3248186

+0

あなたは試みることができる:app.use(bodyParser.urlencoded({拡張:真}));

+0

でfalseを渡す代わりに、クライアントコードのenctype属性を削除しようとすることもできますファイルをアップロードするのに、後でそれを削除して、通常のテキスト入力のために最低限の作業をするかどうかを確認してください。 –

関連する問題