Posted at

【初心者向け】Node.jsを使って5分でファイルアップローダを作成

More than 1 year has passed since last update.

本稿はNode.jsでmulterを使ったファイルアップローダを実装するためのメモである。

ターゲットとしては初心者向けを想定している。

流れは以下の通り。


  1. ライブラリのインストール

  2. クライアントアプリ作成

  3. サーバアプリ作成

  4. サーバアプリ実行&試す


ライブラリのインストール

以下のようにnpmコマンドで必要なライブラリをインストールする。

$ npm install express

$ npm install multer

npmコマンドは、JavaScriptのパッケージマネージャのコマンドである。

(RubyのgemやPythonのpipのようなもの)


クライアントアプリ作成

クライアントアプリには以下のようなコードを使用する。


up.html

<!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なので、

環境に応じて適切な値を記載する。


サーバアプリ作成

サーバアプリには以下のようなコードを記載する。


server.js

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");
});