Multer を使用した Node.js でのファイル アップロードの処理: 包括的なガイド

Mary-Kate Olsen
リリース: 2024-11-18 10:02:02
オリジナル
387 人が閲覧しました

Handling File Uploads in Node.js with Multer: A Comprehensive Guide

Web 開発の世界では、ファイルのアップロードを処理することが一般的な要件です。プロフィール写真、ドキュメント、画像のいずれであっても、多くのアプリケーションはファイルを安全かつ効率的にアップロードして保存する必要があります。 Express で Node.js を使用する場合、Multer は、このタスクをスムーズに処理するために利用できる最良のライブラリの 1 つです。

このブログでは、インストール、構成、ストレージ オプション、ファイル フィルタリング、コード例を含む一般的な使用例など、Node.js での Multer の使用について知っておくべきことをすべて説明します。


目次

  1. マルターとは何ですか?
  2. インストール
  3. Express で Multer をセットアップする
  4. ストレージオプションについて
    • ディスクストレージ
    • メモリストレージ
    • クラウドストレージ (S3 の例)
  5. タイプによるファイルのフィルタリング
  6. ファイルサイズの制限
  7. 複数のファイルのアップロードの処理
  8. Multer でのエラー処理
  9. 実際の使用例
  10. 結論

マルターとは何ですか?

Multer は、Web アプリケーションでファイルをアップロードするために一般的に使用される形式である multipart/form-data を処理するためのミドルウェアです。これは、Express で動作するように特別に設計されており、以下を提供することでファイルのアップロードの管理に役立ちます。

  • ファイル ストレージ: サーバーまたは他のストレージ サービスにファイルを保存するための構成可能なストレージ オプション。
  • ファイル フィルタリング: ファイル タイプの制限を設定できます。
  • サイズ制限: ファイル サイズを制限して、過剰なデータのアップロードを防ぎます。

インストール

Multer を使い始めるには、npm 経由でインストールします。

npm install multer
ログイン後にコピー
ログイン後にコピー

Express を使用した Multer のセットアップ

Express アプリケーションで Multer を使用して、基本的なファイル アップロード ハンドラーを設定することから始めましょう。開始方法は次のとおりです:

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

// Configure Multer for basic usage
const upload = multer({ dest: 'uploads/' }); // Destination folder for uploaded files

// Single File Upload Route
app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded successfully!');
});

app.listen(3000, () => console.log('Server running on port 3000'));
ログイン後にコピー
ログイン後にコピー

この例では:

  • Upload.single('file'): このミドルウェアは、キー ファイルとともにアップロードされた単一のファイルを処理します。
  • アップロードされたファイルは、uploads/ フォルダーに保存されます。

ストレージオプションについて

Multer は 2 つの主要なストレージ オプションを提供します:

  1. ディスク ストレージ: ファイルをサーバー上にローカルに保存します。
  2. メモリ ストレージ: ファイルをバッファ オブジェクトとしてメモリに保存します (メモリ内のファイルの処理に役立ちます)。

1. ディスクストレージ

ディスク ストレージを使用すると、ファイルの名前と宛先パスをより詳細に制御できます。

npm install multer
ログイン後にコピー
ログイン後にコピー
  • destination: ファイルのアップロード用のフォルダーを指定します。
  • filename: ファイル名のカスタマイズを許可します (例: 一意にするためのタイムスタンプの追加)。

2. メモリストレージ

メモリ ストレージでは、ファイルはバッファとして保存されます。これは、有効期間が短いファイルや、ファイルをディスクに保存せずにアップロードを処理する場合に役立ちます。

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

// Configure Multer for basic usage
const upload = multer({ dest: 'uploads/' }); // Destination folder for uploaded files

// Single File Upload Route
app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded successfully!');
});

app.listen(3000, () => console.log('Server running on port 3000'));
ログイン後にコピー
ログイン後にコピー

クラウドストレージ: AWS S3 を使用したマルチター

実稼働アプリケーションの場合、多くの場合、クラウド ストレージ (AWS S3 など) にファイルを直接保存することが推奨されます。 S3 と統合するには、multer-s3 を使用します。

const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, 'uploads/'), // Folder location
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, uniqueSuffix + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage });
ログイン後にコピー
const upload = multer({ storage: multer.memoryStorage() });
ログイン後にコピー

この設定では、ローカル ストレージをバイパスして、指定された S3 バケットにファイルを直接アップロードします。


ファイルの種類によるフィルタリング

ファイルを種類ごとにフィルタリングして、特定のファイル形式 (画像など) のみを受け入れることができます。 fileFilter オプションを使用します。

npm install aws-sdk multer-s3
ログイン後にコピー

ファイルサイズの制限

大きなファイルがアップロードされないようにするには、制限オプションを設定します。ファイルサイズを 1MB に制限する方法は次のとおりです:

const aws = require('aws-sdk');
const multerS3 = require('multer-s3');

aws.config.update({ region: 'your-region' });

const s3 = new aws.S3();

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'your-s3-bucket-name',
    metadata: (req, file, cb) => cb(null, { fieldName: file.fieldname }),
    key: (req, file, cb) => cb(null, Date.now().toString() + '-' + file.originalname)
  })
});
ログイン後にコピー

複数のファイルのアップロードの処理

Multer は複数のファイルのアップロードもサポートしています:

const fileFilter = (req, file, cb) => {
  // Accept only image files
  if (file.mimetype.startsWith('image/')) {
    cb(null, true); // Accept file
  } else {
    cb(new Error('Only image files are allowed!'), false); // Reject file
  }
};

const upload = multer({
  storage: storage,
  fileFilter: fileFilter
});
ログイン後にコピー
  • Upload.array('files', 5): 同じフィールドに最大 5 つのファイルをアップロードできます。
  • Upload.fields: 異なるフィールド名を持つファイルの処理を有効にします。

Multer でのエラー処理

適切なエラー処理は、スムーズなユーザー エクスペリエンスにとって非常に重要です。 Multer はいくつかのタイプのエラーをスローする可能性があり、次のように処理できます。

const upload = multer({
  storage: storage,
  limits: { fileSize: 1 * 1024 * 1024 } // 1 MB limit
});
ログイン後にコピー

実際の使用例

Multer を使用するための実際のアプリケーションをいくつか示します。

  1. プロフィール画像のアップロード: ユーザーがプロフィール写真をアップロードし、サーバーまたは S3 に保存し、ファイル パスをデータベースに保存できるようにします。
  2. ドキュメント ストレージ: ユーザーが送信したドキュメント (履歴書、PDF など) をカスタム ストレージとフィルタリング構成で保存します。
  3. 電子商取引のメディア ファイル: ベンダーが製品画像をアップロードし、ファイルの種類とサイズを制限し、簡単に取得できるようにクラウド ストレージに保存できるようにします。

結論

Multer は、柔軟なストレージ オプション、ファイル フィルタリングを提供し、単一ファイルから複数ファイルまでのさまざまなアップロード要件を処理することにより、Node.js アプリケーションでのファイル処理を簡素化します。小規模なアプリを構築している場合でも、ファイル処理が必要な運用レベルのアプリケーションを構築している場合でも、Multer が対応します。

コーディングを楽しんでください! ?

以上がMulter を使用した Node.js でのファイル アップロードの処理: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート