express-form-dataを使ってフォームデータを受け取る
Node.js+Expressでのファイルアップロード方法について、
過去の記事では、multerを使う方法を紹介しました。
今回はexpress-form-dataを使ってファイルアップロードやフォームデータの取得をする方法です。
ファイルアップロードとフォームデータを取得したい場合は、こちらの方が便利です。
インストール
npm install express-form-data
サーバサイドのフォームデータ取得例
const formData = require('express-form-data');
// ファイルアップロードに利用.
app.use(formData.parse({ uploadDir: path.join(__dirname, 'upload'), autoClean: true }));
// これを指定すると、サイズが0のファイルはfilesから削除してくれる
app.use(formData.format());
app.post('/send-form-data', (request, response) => {
// アップロードファイルは request.files に設定されます.
console.log(request.files);
// フォームの値は request.body に設定されます.
console.log(request.body);
response.sendStatus(200);
});
アップロードファイルの保存例
for (let name of Object.keys(request.files)) {
const file = request.files[name];
const bytes = fs.readFileSync(file.path);
const filepath = path.join(__dirname, 'public', 'pdf', file.originalFilename);
fs.writeFileSync(filepath, bytes);
}
フォームの値の取得例
値は文字列の場合と、配列の場合があるのでどちらで設定されているのか注意が必要です。
使い方によってはArray.isArray()を使って判定する必要があります。
// body のプロパティはフォームの name 属性.
let pageId = request.body.pageid;
let inputText = request.body.textid;
クライアントサイド
フォームの action で送信する例
<form action='/send-form-data' enctype="multipart/form-data" method="post">
<div class="d-grid gap-2 d-md-block mb-3">
<button class="btn btn-primary" type="submit">送信</button>
<button class="btn btn-primary" type="reset">リセット</button>
</div>
<input type="hidden" name="pageid" value="001">
<input type="text" name="textid">
<input type="file" name="upload" accept=".jpg">
</form>
fetch() を使う例
<form id="sendForm"">
<div class="d-grid gap-2 d-md-block mb-3">
<button class="btn btn-primary" type="button" onclick="onClickSendButtonForFormData();">送信</button>
<button class="btn btn-primary" type="reset">リセット</button>
</div>
<input type="hidden" name="pageid" value="001">
<input type="text" name="textid">
<input type="file" name="upload" accept=".jpg">
</form>
new FormData()では、パラメータに渡したFormのうちname属性があるものが自動で設定されます。
<script>
function onClickSendButtonForFormData() {
// name 属性があるもののみ自動で設定される.
const formData = new FormData(document.getElementById('sendForm'));
fetch('/send-form-data', {
method: 'POST',
body: formData,
}).then((response) => {
if (!response.ok) {
throw('Server error.');
}
}).catch((error) => {
alert(`send-data failed.\n${error}`);
});
}
</script>
スクリプトでフォームデータを設定する
set()またはappend()メソッドでフォームデータの追加ができます。
キーはフォームのname属性にあたるものです。
formData.set(キー, 値);
formData.append(キー, 値);
set()は指定したキーが存在する場合、その値を上書きするappend()は指定したキーが存在する場合、配列にして追加する
ただし、キーが存在する場合でも現在の値が空であれば、上書き扱いとなる
設定する値は、文字列のみでオブジェクト(JSON)は設定できません。
