Node.js+Express+Multerでファイルをアップロードする

multerとは

Expressを使ってファイルをアップロードしたい場合によく使われるミドルウェア

ディレクトリ構成

multerをインストール

npm install multer

upload.ejsへのルーティングを追加【app.js】

const express = require('express');
const app = express();

app.get('/upload', (req, res) => {
  res.render('upload.ejs');
});

ファイルのアップロード画面を作成【upload.ejs】

<form action='/uploadfile' method='post' enctype='multipart/form-data'>
  <input type='file' name='file'>
  <input type='submit' value='送信'>
</form>

ファイルをアップロードする【app.js】

destでアップロード先を指定する。

const multer = require('multer');
const upload = multer({ dest: 'public/uploads/' });

app.post('/uploadfile', upload.single('file'), (req,res) =>{
  // アップロードしたファイルの情報を知りたい場合はreq.fileオブジェクトにアクセス
  console.log(req.file);
  
  res.redirect('/');
});

フォームの値を受け取るための定形文

app.use( express.urlencoded({extended: false}));

※保存する前にファイル名を変更したい場合

デフォルトだとファイル名がランダムな名前に変更されてから拡張子が外されて保存されます。

multer.diskStorageを使うことで、拡張子が付いたまま、ファイル名も変更されずに保存できます。

const storage = multer.diskStorage({
  destination: function(req, file, cb){
    cb(null, 'public/uploads/')
  },
  filename: function(req, file, cb){
    cb(null, file.originalname)
  }
});

// const upload = multer({ dest: 'public/uploads' });
const upload = multer({ storage: storage });

参考サイト

https://reffect.co.jp/node-js/express-js-file-upload

https://qiita.com/tronicboy/items/e71c5f22a5a7da0faa36