本稿はNode.jsでmulterを使ったファイルアップローダを実装するためのメモである。
ターゲットとしては初心者向けを想定している。
流れは以下の通り。
- ライブラリのインストール
- クライアントアプリ作成
- サーバアプリ作成
- サーバアプリ実行&試す
ライブラリのインストール
以下のようにnpmコマンドで必要なライブラリをインストールする。
$ npm install express
$ npm install multer
npmコマンドは、JavaScriptのパッケージマネージャのコマンドである。
(RubyのgemやPythonのpipのようなもの)
クライアントアプリ作成
クライアントアプリには以下のようなコードを使用する。
<!doctype html>
<html>
<head>
<title>ファイルアップロード</title>
</head>
<body>
<h1>File Upload</h1>
<p>サンプル ファイルアップロード</p>
<form action="http://127.0.0.1:58080/file_upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="Upload">
</form>
</body>
</html>
ポイントはformタグやinputタグである。
formタグのaction属性はHTTPでファイルをアップロードする際のURLなので、
環境に応じて適切な値を記載する。
サーバアプリ作成
サーバアプリには以下のようなコードを記載する。
var express = require('express');
var app = express();
var multer = require("multer");
app.post('/file_upload', multer({dest: '/tmp/samplefup/'}).single('file'), function (req, res) {
// multerが/tmp/samplefup/配下にファイルを作成
// req.file.pathでmulterが作成したファイルのパスを取得可能
console.log(req.file.path, req.file.originalname);
res.end("upload!");
});
var server = app.listen(58080, function() {
console.log("listening at port %s", server.address().port);
});
上記は、ファイルを受信して標準出力にアップロードされたファイルのパスと、
アップロードされたファイルのファイル名を出力するサーバアプリである。
気にするポイントはapp.post()で、multerと関連付けを行っている部分である。
single()は単一のファイルを受信するためのメソッドで、引数はinputタグのnameに対応する。
ひとまず試すだけであればnodeコマンドを実行して張り付ければ十分である。
サーバアプリ実行&試す
サーバアプリは以下のように起動する。
$ node server.js
起動後、クライアント(up.html)をWebブラウザで開き、
ファイルを選択して「Upload」ボタンを押下すればファイルのアップロードを行うことができる。
おまけ
up.htmlをHTTP経由で提供するには、
Webサーバを使用したり、expressを使用したりすれば良い。
例えばserver.jsの「app.listen()」の上部に以下のようなコードを書けば良い。
app.get('/up.html', function (req, res) {
res.sendFile(__dirname + "/" + "up.html");
});