MulterおよびExpressで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で必須であり、Multerインスタンスを格納するためにupload
変数を宣言します。
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トピックページで演習をご覧ください。およびプログラミングプロジェクト。