クライアント(HTML)からサーバ(Node.js+Express+Multer)へファイルをアップロードするコードを紹介いたします。
他のネット記事にも様々な情報が記載されておりましたが、どれも一発で完璧に動作するコードがなかったので、これを機に完全版としてQiitaに公開しておこうかと思います。
参考にさせて頂いたネット記事を書かれた様々な方々にこの場を借りて感謝致します。
クライアントサイド(HTMLコード)
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ファイルのアップロード</title>
</head>
<body>
<form id="form1" method="POST" enctype="multipart/form-data" action="http://localhost:3000/single">
<fieldset class="form-group">
<label for="file1">アップロードファイル (1)</label>
<input type="file" id="file1" name="file1" class="form-control" />
</fieldset>
<fieldset class="form-group">
<input type="submit" id="submitButton" name="submitButton" class="btn btn-primary" value=" 送信 " />
</fieldset>
</form>
</body>
</html>
サーバーサイド(Node.js+Express+Multerを使ったJavaScriptコード)
事前に必要なモジュールはnpmコマンドでインストールしておいてください。
アップロード先はindex.jsのあるフォルダ(ディレクトリ)下のtmpフォルダ(ディレクトリ)です。
あらかじめ、tmpフォルダ(ディレクトリ)自体は作成しておいてください。
index.js
const multer = require('multer');
const express = require('express');
const app = express();
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'tmp/')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
})
const upload = multer({ storage: storage })
app.post('/single', upload.single('file1'), (req, res) => {
console.log("{message:'アップロード成功'}");
});
app.listen(3000);
サーバの起動の仕方は以下のコマンドで。
node index.js
HTML画面
クライアントサイドのindex.htmlをブラウザで表示させ、ファイルを選択して送信ボタンを押せば、サーバ側のtmpフォルダ(ディレクトリ)下にファイルがアップロードされます。
あとがき
結構、ネット検索して様々な記事を調べましたが、なかなか動作せず、苦労致しました。コードは応用が利くように最小限に留めました。この記事を見て、皆様のお役に立てれば幸いです。