【初心者向け】Node.jsとExpressで画像アップロードを実装！画像を簡単かつ効率的に扱う方法

2024-06-25

Node.jsとExpressを使って画像をアップロード、表示、保存する方法

必要なもの

Node.js
npm
Express
Multer

手順

プロジェクトのセットアップ
```
npm init -y
npm install express multer
```
アップロード処理

以下のコードは、upload.jsというファイルに保存します。
```
const express = require('express');
const multer = require('multer');
const app = express();

const storage = multer.diskStorage({
  destination: './uploads/',
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('image'), (req, res) => {
  if (req.file) {
    res.json({ message: 'File uploaded successfully.', filename: req.file.originalname });
  } else {
    res.status(400).json({ message: 'No file uploaded.' });
  }
});

app.listen(3000, () => console.log('Server started on port 3000'));
```
このコードは、以下のことを行います。
- multerモジュールをインポートします。
- アップロードされたファイルを保存するためのディスクストレージを設定します。
- uploadミドルウェアを作成します。
- /uploadエンドポイントへのPOSTリクエストを処理します。
- ファイルがアップロードされたら、その名前とメッセージをJSONレスポンスとして返します。
- ファイルがアップロードされなかった場合は、エラーメッセージを返します。
- サーバーをポート3000で起動します。

画像の表示

const express = require('express');
const app = express();
const path = require('path');

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

app.listen(3000, () => console.log('Server started on port 3000'));

express.staticミドルウェアを使用して、uploadsディレクトリを静的ファイルとして公開します。
/エンドポイントへのGETリクエストを処理し、index.htmlファイルを返します。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Upload</title> </head> <body> <h1>Image Upload</h1> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="image"> <button type="submit">Upload</button> </form>

  <div id="image-container"></div>

  <script>
    const imageContainer = document.getElementById('image-container');

    document.querySelector('form').addEventListener('submit', function (event) {
      event.preventDefault();

      const fileInput = document.querySelector('input[type="file"]');
      const file = fileInput.files[0];

      const formData = new FormData();
      formData.append('image', file);

      fetch('/upload', {
        method: 'POST',
        body: formData
      })
        .then(response => response.json())
        .then(data => {
          if (data.message === 'File uploaded successfully.') {
            const img = document.createElement('img');
            img.src = `/uploads/${data.filename}`;
            imageContainer.appendChild(img);
          } else {
            alert(data.message);
          }
        });
    });
  </script

upload.js

const express = require('express');
const multer = require('multer');
const app = express();

const storage = multer.diskStorage({
  destination: './uploads/',
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('image'), (req, res) => {
  if (req.file) {
    res.json({ message: 'File uploaded successfully.', filename: req.file.originalname });
  } else {
    res.status(400).json({ message: 'No file uploaded.' });
  }
});

app.listen(3000, () => console.log('Server started on port 3000'));

app.js

const express = require('express');
const app = express();
const path = require('path');

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

app.listen(3000, () => console.log('Server started on port 3000'));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Upload</title>
</head>
<body>
  <h1>Image Upload</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image">
    <button type="submit">Upload</button>
  </form>

  <div id="image-container"></div>

  <script>
    const imageContainer = document.getElementById('image-container');

    document.querySelector('form').addEventListener('submit', function (event) {
      event.preventDefault();

      const fileInput = document.querySelector('input[type="file"]');
      const file = fileInput.files[0];

      const formData = new FormData();
      formData.append('image', file);

      fetch('/upload', {
        method: 'POST',
        body: formData
      })
        .then(response => response.json())
        .then(data => {
          if (data.message === 'File uploaded successfully.') {
            const img = document.createElement('img');
            img.src = `/uploads/${data.filename}`;
            imageContainer.appendChild(img);
          } else {
            alert(data.message);
          }
        });
    });
  </script>
</body>
</html>

このコードの説明

upload.js
- このファイルは、画像のアップロード処理を処理します。
app.js
index.html
- このファイルは、画像アップロードフォームと画像表示コンテナーを含むHTMLページです。
- フォームが送信されると、JavaScriptコードが実行され、ファイルが/uploadエンドポイントにPOSTされます。
- レスポンスが成功した場合は、アップロードされた画像がimage-containerコンテナーに表示されます。
- レスポンスが失敗した場合は、エラーメッセージが表示されます。

このコードを実行するには

以下のコマンドを実行して、プロジェクトディレクトリを作成します。

Node.jsとExpressを使って画像をアップロード、表示、保存するその他の方法

別のストレージを使用する

上記コードでは、アップロードされた画像はローカルのuploadsディレクトリに保存されます。代わりに、Amazon S3などのクラウドストレージサービスを使用することもできます。これを行うには、適切なSDKを使用してストレージサービスに接続し、アップロードされたファイルを保存する必要があります。

画像処理を行う

アップロードされた画像を処理することもできます。たとえば、サイズを変更したり、ウォーターマークを追加したり、形式を変換したりできます。これを行うには、sharpなどの画像処理ライブラリを使用する必要があります。

データベースに画像情報を保存する

アップロードされた画像の情報（ファイル名、パス、アップロード日時など）をデータベースに保存することもできます。これにより、画像を後で簡単に検索して管理することができます。

アクセス制御を実装する

アップロードされた画像へのアクセスを制御したい場合は、アクセス制御を実装する必要があります。これを行うには、認証と認可の仕組みを使用する必要があります。

画像を公開APIで提供する

アップロードされた画像を公開APIで提供することもできます。これにより、他のアプリケーションから画像にアクセスできるようになります。

これらの方法は、基本的なチュートリアルで説明されている方法よりも複雑ですが、より多くの機能と柔軟性を提供します。

image node.js upload