Expressで画像ファイルを転送する

Node.jsExpressで画像データを転送する方法です。

サーバ

以下の配置で画像があるとします。

  • 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()を使って画像ファイルを転送します。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技術ブログへ

関連コンテンツ

スポンサードリンク

コメント

メールアドレスが公開されることはありません。