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

以下のように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");
});