Express.jsでファイルのアップロード(multer)
Express.jsとmulterモジュールを使ったファイルアップロードの方法について説明を行なっています。
Express.jsの環境等については以前このブログで紹介した以下の記事に記載しています。Express.jsを使ったことがない人におすすめです。
目次
ファイルアップロードの設定
Multerモジュールのインストール
ファイルのアップロードを行うためにmulterモジュールのインストールを行います。
インストールは、npm installコマンドを使って行います。
$ npm install multer
ファイルアップロード画面の作成
ファイルのアップロードの入力フォームが記述されたhtmlファイルをpublicフォルダの下に作成します。名前をupload.htmlとし、ファイル選択と送信ボタンがついただけのシンプルな入力フォームです。
<!DOCTYPE html>
<html lang="ja"></html>
<head>
<meta charset="UTF-8">
<title>Express.js File Upload</title>
</head>
<body>
<h1>ファイルアップロード</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">送信</button>
</form>
</body>
</html>
multerの設定
multerを下記のように読み込みます。アップロードしたファイルの保存先はuploadsとしuploadsフォルダを作成します。
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
ルーティングの設定
アップロード画面を表示させるためのルーティングを追加します。ファイルは先ほど作成したpublic/upload.htmlを指定しています。
app.get('/upload', (req, res) => res.sendFile(path.join(__dirname, 'public/upload.html')))
アップロードしたファイルを保存するためのコードは下記の通りです。upload.htmlファイルでは/uploadに対してPOSTリクエストを送信します。
app.post('/upload', upload.single('file'), function (req, res, next) {
res.send('ファイルのアップロードが完了しました。');
})
JavaScriptコード
ファイルアップロードに必要な全体のコードは下記の通りです。
const path = require('path')
const express = require('express')
const multer = require('multer')
const app = express()
const port = 3000
const upload = multer({ dest: 'uploads/' })
app.use(express.static(path.join(__dirname, 'public')))
app.get('/', (request, response) => response.send('Hello World!'))
app.get('/upload', (req, res) => res.sendFile(path.join(__dirname, 'public/upload.html')))
app.post('/upload', upload.single('file'), function (req, res) {
res.send(req.file.originalname + 'ファイルのアップロードが完了しました。');
})
app.listen(port,function(){
console.log(`Example app listening on port ${port}!`)
})
ここまででアップロードを行うための準備は完了です。
ファイルのアップロード
ファイルをアップロードする前にExpressサーバを起動しておきます。ここではnodemonを使用しています。
$ npx nodemon index.js
アップロード画面のURL(localhost:3000/upload)にブラウザからアクセスします。
入力フォーム画面からファイルを選択し、送信ボタンを行うとアップロードが行われます。ファイルのアップロードが成功すると以下の完了画面が表示されます。express_img_src.pngがアップロードしたファイルの名前です。
uploadsフォルダを確認すると新規でファイルが保存されていることが確認できます。作成されるファイルは自動で名前がつけられ、ランダムで拡張子はありません。これがアップロードされたファイルです。
uploads $ ls
a9145b2922b7caff0bd80708a65fae63
ファイル名を変更して保存
先ほどの方法ではファイル名はランダムな名前で拡張子もついていませんでした。アップロードしたファイル名と同じファイル名で保存させるためにmulterのdiskStorageを利用します。
diskStorageを追加しファイル名を変更するための設定を行います。
ファイルの保存先はuploadsでファイル名はfile.originalnameでアップロードしたファイル名と同じ名前になるように設定を行なっています。
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
})
// const upload = multer({ dest: 'uploads/' })
const upload = multer({ storage: storage })
ファイル更新後に再度ファイルのアップロードを実行するとuploadsフォルダにアップロードしたファイルと同じ名前でファイルが保存されます。
Express.jsとmulterを利用してファイルのアップロードができることが確認できました。
