multer

multerをインストールするには、以下のコマンドを実行します。

npm i multer

multer - npm

オプション

multer() に指定できる主なオプションは 5つあります。

const upload = multer({
  storage,
  dest,
  limits,
  fileFilter,
  preservePath
});

dest

一時保存先ディレクトリ
内部的には diskStorage の簡易版
filename を制御できない

storage

保存先を動的に変更可能
ファイル名を完全に制御できる

limits

アップロードサイズ制限など。

limits: {
  fileSize: 2 * 1024 * 1024, // 2MB
  files: 1,                 // ファイル数
  fields: 10                // フォームフィールド数
}

fileFilter

拡張子 / MIME チェック
権限による制限（管理者のみ SVG など）

preservePath

webkitdirectory などで送られたディレクトリ構造を維持

preservePath: true // デフォルトはfalse

multer の補助的な設定・メソッド

upload.single()

1ファイルのみアップロードします

upload.single('file1')

upload.array()

同一nameの複数ファイルをアップロードします

upload.array('files', 5)

upload.fields()

upload.fields([
  { name: 'avatar', maxCount: 1 },
  { name: 'docs', maxCount: 3 }
]);

name が違うファイル入力を、1リクエストでまとめて受け取ります。以下のようなフォームの時に利用します。

<form method="POST" enctype="multipart/form-data">
  <input type="file" name="thumbnail">
  <input type="file" name="attachment">
  <button>送信</button>
</form>

// req.files の中身
req.files = {
  thumbnail: [
    {
      fieldname: 'thumbnail',
      originalname: 'thumb.jpg',
      mimetype: 'image/jpeg',
      path: 'tmp/abc123'
    }
  ],
  attachment: [
    { ... },
    { ... }
  ]
}

メソッド	用途	対応する input	受け取り先	主な利用シーン
upload.single()	単一ファイル	<input type="file" name="file">	req.file	プロフィール画像サムネイル画像
upload.array()	同じ name の複数ファイル	<input type="file" name="files" multiple>	req.files[]	複数画像アップロードギャラリー
upload.fields()	異なる name の複数ファイル	<input name="image"> <input name="pdf">	req.files.{name}	CMS管理画面画像＋PDF＋OGP画像

ディレクトリ構成

ディレクトリ構成は、以下のようにします。

exapp
- ...
- routes
  - file
- tmp
- upload
- views
  - fileup
    - index.ejs
- app.js
- ...

1つのファイルをアップロードする

exapp\app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var topsRouter = require('./routes/tops');
var fileupRouter = require('./routes/fileup');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/tops', topsRouter);
app.use('/fileup', fileupRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

exapp\views\fileup\index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p class="message" id="message"><%= message %></p>
  <form id="form" method="POST" enctype="multipart/form-data" action="/fileup">
<p><input type="file" name="file1" /></p>
<p><input type="submit" value=" 送信 " /></p>
  </form>
</body>
</html>

exapp\routes\fileup.js

var express = require('express');
const path = require('path');
const fs = require('fs');
const multer = require('multer');
const app_path = path.dirname(__dirname).replace(/\\/g, "/"); // アプリのルートディレクトリ
const upload = multer({ dest: app_path + "/tmp"}); // 一時ディレクトリ

var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('fileup/index', { message: "" });
});

router.post('/', upload.single('file1'), function(req, res, next){
  const tem_path = req.file.path.replace(/\\/g, "/");

  if (tem_path) {
  const after_path = app_path + "/upload/" + req.file.originalname; // ファイルの保存場所
  fs.renameSync(tem_path, after_path);
  res.render('fileup/index', { message: "アップロードされました。" });
  } else {
  res.render('fileup/index', { message: "エラー：アップロードできませんでした。" });
  }
});

module.exports = router;

複数のファイルのアップロード

exapp\views\fileup\index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p class="message" id="message"><%= message %></p>
  <form id="form" method="POST" enctype="multipart/form-data" action="/fileup">
<p><input type="file" name="file1" multiple /></p>
<p><input type="submit" value=" 送信 " /></p>
  </form>
</body>
</html>

exapp\routes\fileup.js

const express = require('express');
const path = require('path');
const fs = require('fs');
const multer = require('multer');
const app_path = path.dirname(__dirname).replace(/\\/g, "/"); // アプリのルートディレクトリ
const upload = multer({ dest: app_path + "/tmp"}); // 一時ディレクトリ

const router = express.Router();

router.get('/', function(req, res, next) {
  res.render('fileup/index', { message: "" });
});

const MAXFILES = 3;
router.post('/', upload.array('file1', MAXFILES), function(req, res, next){
  const n = req.files.length;

  try {
for(let i = 0; i < n; i++){
  let tem_path = req.files[i].path.replace(/\\/g, "/");
  const after_path = app_path + "/upload/" + req.files[i].originalname; // ファイルの保存場所
  fs.renameSync(tem_path, after_path);
}
res.render('fileup/index', { message: "アップロードされました。" });
  }
  catch (err){
res.render('fileup/index', { message: "エラー：アップロードできませんでした。" });
  }
});

module.exports = router;