expressでフォームからファイルアップロードする

めも


node.jsでexpress使ってフォームのファイルアップロードする場合、
bodyParser使っていればrequestのfilesから取得できる様子。

実験コード

HTMLはこんな感じ。

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Study</title>
    </head>
    <body>
        <div>
            <h3>File Upload</h3>
            <!-- ファイルアップロードフォーム -->
            <form id="file-form" method="post" action="/postdata" enctype="multipart/form-data">
                <input type="file" name="image_file" />
                <button type="submit" class="btn">Submit</button>
            </form>
            <h3>Uploaded File</h3>
            <!-- 前にアップロードしたファイル -->
            <img src="./img/upfile.png" />
        </div>
    </body>
</html>

サーバ側のソースこんな感じ。

var express = require('express'),
fs = require('fs'),
imageDirPath = __dirname + '/webroot/img/',
app = express();

app.use(express.static(__dirname + '/webroot'));
app.use(express.bodyParser());

app.post('/postdata', function(req, res) {
    // fileオブジェクト取得
    var file = req.files.image_file;
    // リネームしてimgタグで見れるようにする
    fs.rename(file.path, imageDirPath + 'upfile.png' , function(err) {
        if (err) {
            console.log(err);
        }
        // リダイレクトで戻す
        res.set('Location', '/');
        res.send(301);
    });
});
app.listen(8080);

補足

bodyParserにパラメータ渡すと、一時ファイルで拡張子を維持するとか、一時ファイルの保存ディレクトリを指定できる。

app.use(express.bodyParser({ keepExtensions: true, uploadDir: '/my/files' }));