nodejs實作上傳資料夾-前端問答-PHP中文網

首頁

web前端

前端問答

nodejs實作上傳資料夾

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 25, 2023 pm 05:43 PM

前言

在 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模組的renameSync()函數將每個檔案移到指定的目錄中。在移動檔案之前，我們需要透過替換檔案名稱中的特殊字元來產生新的檔案名稱。如果在移動檔案時發生錯誤，則會在回應中傳回錯誤訊息。