MulterおよびExpressでNode.jsバックエンドを使用して画像をアップロードする方法

投稿日: 2022-04-20 2022-04-20
タグ: Node.js

序章

フロントエンドに画像をアップロードすることもできますが、画像を受信するには、バックエンドにAPIとデータベースを実装する必要があります。 Node.jsフレームワークであるMulterとExpressを使用すると、1つの設定でファイルと画像のアップロードを確立できます。

この記事では、MulterとExpressを使用してNode.jsバックエンドで画像をアップロードする方法を学習します。

前提条件

Node.jsを理解することをお勧めします。 Node.jsの詳細については、Node.jsシリーズのコーディング方法をご覧ください。
ExpressのHTTPリクエストメソッドの一般的な理解をお勧めします。 HTTPリクエストメソッドの詳細については、ExpressチュートリアルでルートとHTTPリクエストメソッドを定義する方法をご覧ください。

ステップ1—プロジェクトの設定

ExpressはNode.jsフレームワークであるため、次の手順を実行する前に、Node.jsからNode.jsがインストールされていることを確認してください。ターミナルで次を実行します。

プロジェクト用にnode-multer-expressという名前の新しいディレクトリを作成します。

mkdir node-multer-express

新しいディレクトリに移動します。

cd node-multer-express

デフォルトで新しいNode.jsプロジェクトを初期化します。これには、依存関係にアクセスするためのpackage.jsonファイルが含まれます。

npm init

エントリファイルindex.jsを作成します。ここで、Expressロジックを処理します。

touch index.js

Multer、Express、およびmorganを依存関係としてインストールします。

npm install multer express morgan --save

Multerは画像アップロードライブラリであり、Expressリクエストからのフォームデータへのアクセスを管理します。 morgan は、ネットワーク要求をログに記録するためのExpressミドルウェアです。

プロジェクトにMulterを適用する

Multerライブラリを設定するには、.diskStorage()メソッドを使用して、ファイルをディスクに保存する場所をExpressに指示します。 index.jsファイルで、Multerを要求し、storage変数を宣言し、その値に.diskStorage()メソッドの呼び出しを割り当てます。

index.js

const multer = require('multer');

const storage = multer.diskStorage({
  destination: function(req, file, callback) {
    callback(null, '/src/my-images');
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname);
  }
});

diskStorage()メソッドのdestinationプロパティは、ファイルが保存するディレクトリを決定します。ここで、ファイルはディレクトリmy-imagesに保存されます。 destinationを適用していない場合、オペレーティングシステムはデフォルトで一時ファイル用のディレクトリになります。

プロパティfilenameは、ファイルの名前を示します。ファイル名を設定しない場合、Multerはランダムに生成されたファイルの名前を返します。

注： Multerはファイル名に拡張子を追加しないため、ファイル拡張子が付いたファイル名を返すことをお勧めします。

Multerのセットアップが完了したら、Expressサーバー内で結合しましょう。

ステップ2—Expressサーバーの処理

Expressサーバーは、HTTPリクエストメソッド、requestおよびresponseライフサイクルメソッドのロジックを処理する場所であり、ファイルと画像の転送のために依存関係Multerとmorganを実装できます。

index.jsファイルで、app変数を宣言し、その値にExpressインスタンスを割り当てます。 Multerとmorganで必須であり、upload変数を宣言してMulterインスタンスを格納します。

index.js

import morgan from 'morgan';
import express from 'express';
const app = express();
const multer = require('multer');
const upload = multer({dest: 'uploads/'});

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(morgan('dev'));

app.use(express.static(__dirname, 'public'));

Expressミドルウェア.use()を操作して、.json()ミドルウェアを渡し、着信応答をJSONオブジェクトとして解析します。同様に、.use()は、モーガンの呼び出しと引数'dev'を受け入れます。これは、応答ステータスを警告するためにモーガンの開発環境を使用するようにExpressに指示します。静的ファイルを作成するには、Expressミドルウェア.static()を.use()に転送し、イメージを含むディレクトリを引数として定義します。

グローバル変数を設定したら、匿名ルートを受け入れるPOSTリクエストを設定し、reqおよびresponseコールバックを設定して新しいファイルと画像を受信します。

app.post('/', upload.single('file'), (req, res) => {
  if (!req.file) {
    console.log("No file received");
    return res.send({
      success: false
    });

  } else {
    console.log('file received');
    return res.send({
      success: true
    })
  }
});

匿名ルートがファイルまたは画像を受信すると、Multerはそれらを指定されたディレクトリに保存します。 POSTリクエストの2番目の引数であるupload.single()は、fieldnameプロパティを持つファイルを保存し、Expressreq.fileに保存するための組み込みのMulterメソッドです。 ] 物体。 fieldnameプロパティは、Multer.diskStorage()メソッドで定義されています。

データベースを統合する場合は、index.jsファイルにファイル名を要求できます。

index.js

const host = req.host;
const filePath = req.protocol + "://" + host + '/' + req.file.path;

変数filePathをデータベースに保存し、受信ファイル名でデータベースを操作します。

結論

Expressは、受信ファイルと画像をサーバーに保存および保存するプロセスを提供します。ミドルウェアの依存関係であるMulterは、フォームデータを合理化して、複数のファイルのアップロードを処理します。

Node.jsの詳細については、 React.jsシリーズのコーディング方法をご覧になるか、Node.jsトピックページで演習をご覧ください。およびプログラミングプロジェクト。

getdocs

13036