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.fileoriginalnamepathの情報が入ってくる

例:

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