expressでアップロードされたファイルを受け取る

2016-03-01

Node.js上で動かすサーバのフレームワークexpress4で、クライアントからアップロードされたファイルを受け取るにはmulterというモジュールを使うとよい。

使用するモジュール

  • express
  • multer
$ npm install --save express multer

HTML

// index.html
<!DOCTYPE html>
<html>
  <body ng-controller="AppController as app">
    <form action="upload" method="POST" enctype="multipart/form-data">
      <input type="file" name="upName">
      <input type="submit">
    </form>
  </body>
</html>
  • input type="file" の要素の name（ここではupName）をサーバ側で受け取るときに参照する

サーバのソース

// server.js
(() => {
  'use strict'

  const express = require('express')
  const multer = require('multer')

  const app = express()

  // アップロードされるファイルの受け取り
  const upload = multer({dest: 'uploaded'})
  app.post('/upload', upload.single('upName'), (req, res) => {
    console.log(`originalname: ${req.file.originalname}`)
    console.log(`path: ${req.file.path}`)
    res.send(JSON.stringify({ok: true}))
  })

  app.use('/', express.static('.'))  // 静的ファイルのサーブ
  app.listen(8080)  // ポートを指定してサーバ起動
})()
  • multer({dest: アップロードされるファイルの格納先}) で、クライアントからアップロードされた時のファイルの格納先を指定する
  • クライアントからの送り先のURLと対応するメソッド（app.post('/upload')）に対して upload.single(受け取るファイルの名前)で指定すると、指定した格納先にファイルが保存された状態で、リクエスト情報req.fileにoriginalnameやpathの情報が入ってくる

例：

originalname: readme.txt  # 元のファイル名
path: uploaded/a1a679c0a10ac1fd2a5248ad9f1e7993  # 格納先

関連記事

新着記事