Node.jsで静的ファイルを送信する – response.sendFile()の使い方

Expressresponse.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">

このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です