ファイルアップロード（fetch + FormData） — const fd = new FormData(); fd.append('file', file); fetch(url, { method: 'POST', body: fd })
Web アプリで「ファイルをサーバーに送る」には FormData と fetch を組み合わせるのが基本です。
初心者は「フォームの代わりに JavaScript でファイルを送る仕組み」と覚えると理解しやすいです。
基本のコード例
// input要素からファイルを取得
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
// FormDataを作成してファイルを追加
const fd = new FormData();
fd.append('file', file);
// fetchでPOST送信
fetch('/upload', {
method: 'POST',
body: fd
})
.then(res => res.json())
.then(data => console.log('アップロード成功:', data))
.catch(err => console.error('エラー:', err));
FormData→ フォームデータを表すオブジェクト。ファイルや文字列を追加できる。fd.append('file', file)→'file'というキーでファイルを追加。fetch(url, { method: 'POST', body: fd })→ サーバーに送信。
よく使うテンプレート集
複数ファイルを送る
const fd = new FormData();
fd.append('file1', file1);
fd.append('file2', file2);
fetch('/upload', { method: 'POST', body: fd });
ファイルと一緒にテキストも送る
const fd = new FormData();
fd.append('file', file);
fd.append('username', 'Aki');
fetch('/upload', { method: 'POST', body: fd });
async/await で書く
async function uploadFile(file) {
const fd = new FormData();
fd.append('file', file);
try {
const res = await fetch('/upload', { method: 'POST', body: fd });
const data = await res.json();
console.log('アップロード成功:', data);
} catch (err) {
console.error('エラー:', err);
}
}
例題: 画像アップロードフォーム
<input type="file" id="imgInput" />
<button id="uploadBtn">アップロード</button>
<script>
document.getElementById('uploadBtn').addEventListener('click', async () => {
const file = document.getElementById('imgInput').files[0];
if (!file) return alert('ファイルを選んでください');
const fd = new FormData();
fd.append('image', file);
const res = await fetch('/upload-image', {
method: 'POST',
body: fd
});
const result = await res.json();
console.log('サーバーからの応答:', result);
});
</script>
- 効果: ユーザーが選んだ画像をサーバーに送信できる。
実務でのコツ
- サーバー側の受け取り方: Express (Node.js) なら
multer、PHP なら$_FILESで受け取れる。 - ヘッダーは不要:
fetchにFormDataを渡すと自動でContent-Type: multipart/form-dataが設定される。 - 大きなファイル: 進捗表示や分割アップロードが必要になる場合もある。
練習問題（プロフィール画像アップロード）
async function uploadProfile(file) {
const fd = new FormData();
fd.append('avatar', file);
fd.append('userId', '123');
const res = await fetch('/upload-avatar', {
method: 'POST',
body: fd
});
const data = await res.json();
console.log('アップロード結果:', data);
}
直感的な指針
FormData= フォームデータを作る箱。appendでファイルや文字列を追加。fetchでサーバーに送信。- 初心者は「ファイルだけ」「ファイル＋テキスト」「複数ファイル」で練習すると理解が深まる。
これを覚えれば「ブラウザからファイルをサーバーに送る」仕組みを簡単に作れるようになり、画像アップロードやドキュメント送信などの機能を実装できます。