node.jsでファイルのアップロード

expressを使いファイルを指定ディレクトリにアップロードする簡単な例。

下準備

ワークディレクトリ内で以下を実行すると、node_modulesディレクトリが作成される。


npm install express --save
npm install body-parser --save
npm install multer --save

ディレクトリ構造

以下のようなディレクトリ構造を作る。

work/
 ├ server.js
 ├ up.html
 ├ node_modules/
 ├ tmp/
 └ public/
   └ images/

ファイルの設置

up.html


<html>
<head>
<title>File Uploading Test</title>
</head>
<body>
<h1>File Upload</h1>
<p>select a file a upload:</p>

<form action="http://127.0.0.1:8081/file_upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file" size="50">
<input type="submit" value="Upload File">
</form>
</body>
</html>

server.js


var express = require('express');
var app = express();
var fs = require("fs");
var bodyParser = require('body-parser');
var multer = require("multer");

app.use(bodyParser.urlencoded( { extended: false }));
app.use(multer({dest: './tmp/'}).single('file'));

app.get('/up.html', function (req, res) {
    res.sendFile(__dirname + "/" + "up.html");
});

app.post('/file_upload', function (req, res) {
    var file = __dirname + "/public/images" + req.file.originalname;

    fs.readFile(req.file.path, function (err, data) {
        fs.writeFile(file, data, function (err) {
            if (err) {
                console.log(err);
            } else {
                response = {
                    message: 'Success!',
                    filename: req.file.originalname
                };
            }
            console.log(response);
            res.end(JSON.stringify(response));
        });
    });
});

var server = app.listen(8081, function() {
    var host = server.address().address;
    var port = server.address().port;
    console.log("listening at http://%s:%s", host, port);
});

req.fileに一時ファイルの情報が格納されている。


{
  fieldname: 'file',     
  originalname: '51b9b572a6a0737105.jpg',
  encoding: '7bit',      
  mimetype: 'image/jpeg',
  destination: './tmp/', 
  filename: '93f02f7e6436bdcdc55d518dfa240ab8',
  path: 'tmp/93f02f7e6436bdcdc55d518dfa240ab8',
  size: 216147
}   

また、ここではapp.use(multer({dest: './tmp/'}).single('file'));を利用しているが、他にもarray()fields()があり、それに応じて若干記述が変わる。

実行結果


node server.js
listening at http://:::8081
{ message: 'File Uploaded Successfully.',
  filename: '51b9b572a6a0737105.jpg' }

コメントする




fifteen − 13 =