Node.jsで静的ファイルを送信する – response.sendFile()の使い方
Expressのresponse.sendFile()メソッドは、指定されたファイルをHTTPレスポンスとしてクライアントに送信します。
本記事は、response.sendFile()メソッドを使った画像ファイルの送信例になります。
サーバ
以下の配置で画像があるとします。
- index.js
- public/img/sample1.jpg
app.post('/get-image', (request, response) => {
let filepath = path.join(__dirname, 'public', 'img', 'sample1.jpg');
response.sendFile(filepath);
});
response.sendFile()を使って画像ファイルを転送しています。
クライアント
fetch()を使ってページ遷移することなく、非同期で画像の取得・表示をするサンプルです。
スクリプト
function onGetImage() {
fetch('/get-image', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ }),
}).then((response) => {
if (!response.ok) {
throw('画像取得エラー');
}
return response.blob();
}).then((blobData) => {
const imageViewer = document.getElementById('imageViewer');
imageViewer.src = URL.createObjectURL(blobData);
}).catch((error) => {
console.error(error);
});
}
htmlタグ
<button type="button" onclick="onGetImage();" class="btn btn-primary">イメージ表示</button>
<img id="imageViewer" width="640" height="360">
