2016-04-30 19 views
0

私は情報をフォームに提出すると、それは未定義として返されます。私は以下のコードを掲載しました。私のフォームに(enctype = "multipart/form-data")を含めると、本体(req.body)には何も送られません。しかし、私はそれを含むことはありませんが、私はボディを受け取るが、ファイルの処理が動作しないと、ページが読み込みを維持します。未定義ではないフォームからreq.bodyを取得するにはどうすればよいですか?

app.post('/processupload', function(req, res) { 
var date = new Date(); 
titles.push(req.body.pTitle); 
descriptions.push(req.body.postDescription); 
dates.push(date.toString()); 
file_names.push(req.body.fUpload); 

console.log(req); 

var form = new formidable.IncomingForm(); 
form.parse(req, function(err, fields, files) 
{ 
    if(err) return res.redirect(303, '/error'); 
}); 

form.on('end', function(fields, files) 
{ 
    var temp_path = this.openedFiles[0].path; 
    var file_name = this.openedFiles[0].name; 
    var new_location = __dirname + '/public/images/'; 
    fs.copy(temp_path, new_location + file_name); 
    res.redirect(303, 'home'); 
}); 

});

<form action="/processupload" enctype="multipart/form-data" method="POST" id="uploadForm" name="postForm"> 
    <p align="center" id="pUploadForm" name="pPostForm"><label for="photoTitle">Photo Title: </label> 
    <input type="text" id="photoTitle" name="pTitle"><br> 

    <br><input type="file" id="fileUpload" name="fUpload"><br> 

    <br><label for="photoCaption">Photo Caption: </label><br> 
    <textarea rows="10" cols="50" id="photoCaption" name="postDescription"></textarea><br><br> 
    </p> 
</form> 
+0

あなたは 'form.parse'コールバックで' fields'をオブジェクトを経由して、フォーム本体にアクセスする必要があります。これは '' express''(http://expressjs.com/)スタイル要求オブジェクトではないので、 'req.body'を介してアクセスすることはできません。 –

+0

@BlazeSahlzenありがとうございました! – unReaL

答えて

0

写真をアップロードした数週間前のプロジェクトを作成しました。 AngularとNodeを使用しました。しかし、ノードを使用してAngularのみを使用しなくても機能するはずです。私はmulter npmパッケージを使用しました。

var AWS = require('aws-sdk'); 
var s3 = new AWS.S3(); 
var multer = require('multer'); 
var upload = multer({ storage: multer.memoryStorage() }); //Save photo in memory 

router.post('/processupload', upload.single('photo'), function(req, res, next){ 
    var bucketName = process.env.BUCKET_NAME; 
    var file = req.file; 
    var filename = file.originalname; 
    var ext = _.last(filename.split('.')) 
    var keyName = uuid.v4() + '.' + ext; 
    var url = process.env.AWS_URL + bucketName + '/' + keyName; 
    var params = { Bucket: bucketName, Key: keyName, Body: file.buffer, ACL: 'public-read' }; 
    s3.putObject(params, function(err, data) { 
    if (err){ 
     return res.status(400).send(err) 
    } else{ 
     console.log("Successfully uploaded data to myBucket/myKey"); 
     console.log("The URL is", url); 
     res.send(url) 
    }  
    }); 
}); 

これは、画像をアップロードするのに役立ちました。その後、私はS3バケットから画像URLを返します。しかし、あなたはあなたが望むようにそのファイルを扱うことができます。 Multerはreq.fileにアクセスすることができますので、必要な作業を行うことができます。この例では、URLをフロントエンドに返信するために一意のIDを作成しています。フォームでname="photo"upload.single('photo')ミドルウェアによって反映されなければならないのにデバッグするために長い時間がかかった重要な

<form action="/testupload" method='post' enctype='multipart/form-data'> 
     <input type="file" name="photo" id="photo" multiple=false> 
     <button type="submit">Submit</button> 
    </form> 

何か:これは、このコードでの作業の形です。私はこれが助けてくれることを願っています。たくさんの方法があります。これは単なるものです。

出典: https://www.npmjs.com/package/multer http://docs.aws.amazon.com/AmazonS3/latest/UG/UploadingObjectsintoAmazonS3.html

関連する問題