9
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

本稿は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");
});
9
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?