Nodejs はフォルダーのアップロードを実装します-フロントエンドQ&A-php.cn

Nodejs はフォルダーのアップロードを実装します

WBOY

リリース： 2023-05-25 17:43:37

オリジナル

985 人が閲覧しました

はじめに

Web 開発では、ファイルのアップロードは非常に一般的な要件であり、ほとんどの Web アプリケーションにはファイルをアップロードする機能があります。一部のシナリオでは、単一のファイルではなくフォルダー全体をアップロードする必要がある場合、いくつかの特別な方法を使用する必要があります。この記事ではNode.jsを使ってフォルダーをアップロードする機能を実装する方法を紹介します。

実装手順

フォームの作成

ファイルをアップロードする最初の手順は、アップロードされたファイルを含む HTML フォームを作成することです。フォルダーをアップロードするには複数のファイルをアップロードする必要があるため、複数行のテキスト入力ボックスを使用して、ユーザーがアップロードするフォルダーを選択できるようにする必要があります。以下は、サンプル HTML フォームコードです:

<form action="/uploadFolder" method="POST" enctype="multipart/form-data">
    <input type="file" name="folder[]" multiple webkitdirectory directory>
    <input type="submit" value="上传">
</form>

ログイン後にコピー

上記のコードでは、複数行のテキスト入力ボックスを使用して、ユーザーがアップロードするフォルダーを選択し、name を使用して指定できるようにします。 ="folder[]" 複数のファイルの後続の処理を容易にするためのフォーム要素の名前。

ルートの作成

Express アプリケーションの場合、アップロードフォルダー用の新しいルートハンドラーを確立する必要があります。このルートハンドラーでは、フォームデータを解析して処理するために特定のライブラリを使用する必要があります。具体的には、multer ライブラリを使用して、アップロードされたフォルダーを処理します。以下は、multer ライブラリを使用したサンプルコードです。

const express = require("express");
const multer = require("multer");

const app = express();
const upload = multer({ dest: "uploads/" });

app.post("/uploadFolder", upload.any(), (req, res) => {
    console.log(req.files);
    res.send("上传成功");
});

app.listen(3000, () => {
    console.log("应用程序已启动");
});

ログイン後にコピー

上記のコードでは、multer ライブラリを使用してフォームデータを処理し、アップロードされたすべてのファイルを保存します。サーバーは uploads/ ディレクトリにあります。このライブラリには、あらゆる種類のファイルのアップロードを許可することを指定する upload.any() ミドルウェア関数が含まれています。ルートハンドラーでは、req.files オブジェクトを使用して、アップロードされたフォルダー内のすべてのファイルにアクセスできます。

アップロードされたファイルの処理

Node.js の組み込みモジュールを使用して、アップロードされたファイルを処理できます。具体的には、タスクを完了するには、fs モジュールの関連関数を使用する必要があります。以下はサンプルコードです。

const fs = require("fs");

const files = req.files;
for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const filePath = file.path;
    const originalName = file.originalname;
    const fileName = originalName.replace(/[^a-z0-9]/gi, "_").toLowerCase();
    const destPath = "uploads/" + fileName;
    try {
        fs.renameSync(filePath, destPath);
    } catch (err) {
        res.status(500).send('文件上传失败');
    }
}
res.send("上传成功");

ログイン後にコピー

上記のコードでは、最初にループして req.files オブジェクト内のすべてのファイルを読み取り、次に fs## を使用します。 # module #renameSync()関数は、各ファイルを指定されたディレクトリに移動します。ファイルを移動する前に、ファイル名の特殊文字を置き換えて新しいファイル名を生成する必要があります。ファイルの移動中にエラーが発生した場合、応答でエラーメッセージが返されます。

完全なコード