Apiを構築する際には、画像、テキスト文書、スクリプト、pdfなどのファイルをアップロードする必要があります。 この機能の開発では、ファイルの数、有効なファイルの種類、これらのファイルのサイズなど、いくつかの問題が見つかります。 そして、これらの問題から私たちを救うために、私たちはMulterライブラリを持っています。 Multerはノードです。フォーム内のファイルを送信するために使用されるmultipart/form-dataを処理するためのjsミドルウェア。

最初のステップ

最初のステップは、コンピュータ上にNodeJSプロジェクトを作成することです。

Express

をターミナルに追加するには、次のコマンドを入力します:

yarn add express

* NPMを使用してインストールすることもできます

src/フォルダ内にapp.jsという名前のファイルを作成します。 次のステップは、私たちの中で私たちのExpressサーバーを起動することですapp.js

const express = require("express")const app = express()app.listen(3000 || process.env.PORT, () => { console.log("Server on...")})

Multer

の追加プロジェクトを作成し、設定し、Expressをインストールして、multerをプロジェクトに追加します。

yarn add multer

次のステップは、multerをapp.jsファイルにインポートすることです。

const multer = require("multer")

もうすぐそこにいます。 次に、アップロードされたファイルを保存するuploadsというフォルダを作成します。

アップロードの設定と検証

今、私たちはdiskStorageの設定である非常に重要な段階にあります。 DiskStorageは、ファイルの宛先、ファイルの名前を設定し、ファイルの種類に関する検証を追加することができるmulterによって利用可能な方法です。 これらの設定は、プロジェクトのニーズに応じて行われます。 以下では、構成の基本的な例を残します。

const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, "uploads/") }, filename: (req, file, cb) => { cb(null, Date.now() + "-" + file.originalname) },})

上記の設定では、アップロードされたファイルの宛先を言及し、ファイルの名前も変更しました。

アップロードルートを提供する

const uploadStorage = multer({ storage: storage })// Single fileapp.post("/upload/single", uploadStorage.single("file"), (req, res) => { console.log(req.file) return res.send("Single file")})//Multiple filesapp.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => { console.log(req.files) return res.send("Multiple files")})

上記のコードスニペットでは、ファイルを送信するための2つのポストルートを作成しました。 最初の/upload/singleルートは単一のファイルのみを受け取ります。uploadStorage変数はdiskStorage設定を受け取ることに注意してください。 ルート内のミドルウェアとして、単一のファイルをアップロードするためのsingleメソッドを呼び出します。 /upload/multipleルートは複数のファイルを受け取りますが、最大10個のファイルを受け取ります。uploadStorage変数が複数のファイルをアップロードするために`array’メソッドを呼び

終わり

すべての設定が完了すると、私たちの小さなAPIはすでに送信されたファイルを保存することができます。

const express = require("express")const multer = require("multer")const app = express()const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, "uploads/") }, filename: (req, file, cb) => { cb(null, Date.now() + "-" + file.originalname) },})const uploadStorage = multer({ storage: storage })// Single fileapp.post("/upload/single", uploadStorage.single("file"), (req, res) => { console.log(req.file) return res.send("Single file")})//Multiple filesapp.post("/upload/multiple", uploadStorage.array("file", 10), (req, res) => { console.log(req.files) return res.send("Multiple files")})app.listen(3000 || process.env.PORT, () => { console.log("Server on...")})

今それはあなた次第です!

コメントを残す

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