檔案上傳是Web開發項目中的常見需求。但是在 Node.js 中處理檔案上傳可能既複雜又耗時。這就是 Multer 的用武之地。
Multer 是一個強大的 Node.js 中間件，它通過處理 multipart/form-data 請求來簡化檔案上傳過程。在本教程中，您将學習如何利用 Multer 的強大功能來簡化檔案上傳過程。
（更|多優質内|容：java567 點 c0m）
先決條件
要按照本教程進行操作并使用 Multer 實施檔案上傳過程，您應該具備以下先決條件：
- JavaScript 和 Node.js 的基礎知識：熟悉 JavaScript 和 Node.js 對于了解本教程中的概念和代碼示例至關重要。
- Node.js 和 npm：確定您的計算機上安裝了 Node.js 和 npm（節點包管理器）。您可以從官方 Node.js 網站下載下傳并安裝它們。
- 文本編輯器或內建開發環境 (IDE)：您需要文本編輯器或 IDE 來編寫和編輯代碼。流行的選擇包括 Visual Studio Code、Sublime Text、Atom 或 WebStorm。
- 指令行界面 (CLI)：您應該能夠熟練使用指令行或終端來運作指令并浏覽項目的目錄結構。
- 對 HTML 的基本了解：本教程假設您對 HTML 有基本的了解，以建立用于檔案上傳的 HTML 表單。
通過確定具備這些先決條件，您将準備好繼續使用 Multer 并實施檔案上傳過程。
讓我們從第一步開始：設定您的項目。
第 1 步：設定項目
首先建立一個新的 Node.js 項目并使用 package.json 檔案對其進行初始化：
$ mkdir multer-tutorial
$ cd multer-tutorial
$ npm init -y 接下來，安裝必要的依賴項，包括 Express 和 Multer：
$ npm install express multer 第 2 步：建立一個 Express 伺服器
建立一個名為 server.js 的新檔案并設定一個基本的 Express 伺服器：
const express = require('express');
const app = express();
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
`` 第 3 步：設定 Multer 中間件
在此步驟中，您将建立一個名為 upload.js 的單獨檔案來設定 Multer 中間件。Multer 是一個用于處理多部分/表單資料請求的中間件，專為 Node.js 中的檔案上傳而設計。
首先，使用require('multer')導入multer子產品。這確定您可以通路 Multer 功能。
接下來，使用multer.diskStorage()定義上傳檔案的存儲配置。此配置确定上傳的檔案将存儲在伺服器上的位置。它需要一個具有兩個函數的對象：destination和filename。
目标函數指定将儲存上傳檔案的目錄。在此示例中，我們将其設定為'uploads/'，這意味着檔案将存儲在項目根目錄中名為“uploads”的檔案夾中。您可以根據您的要求自定義目标路徑。
檔案名函數确定上傳檔案的名稱。在此示例中，我們使用Date.now()為每個上傳的檔案生成一個唯一的時間戳，這有助于防止檔案名沖突。
我們使用file.originalname附加檔案的原始名稱，以維護有關上傳檔案的一些上下文。您可以修改此函數以根據您的特定需要生成檔案名。
設定存儲配置後，您可以通過調用multer({ storage })并傳入存儲配置對象來建立 Multer 的執行個體。這将建立 Multer 中間件，您可以在 Express 應用程式中使用它來處理檔案上傳。
最後，您使用module.exports導出 Multer 執行個體，以便它可以在應用程式的其他部分導入和使用，例如用于處理檔案上傳的 Express 路由。
通過以這種方式設定 Multer 中間件，您已經配置了上傳檔案的存儲目的地和檔案名，允許 Multer 在您的應用程式中無縫處理檔案上傳。
const multer = require('multer');
// Set up storage for uploaded files
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/');
},
filename: (req, file, cb) => {
cb(null, Date.now() + '-' + file.originalname);
}
});
// Create the multer instance
const upload = multer({ storage: storage });
module.exports = upload; 第 4 步：在 Express 中處理檔案上傳
在您的 server.js 檔案中，需要 upload.js 檔案并設定檔案上傳路徑：
const express = require('express');
const app = express();
const port = 3000;
// Require the upload middleware
const upload = require('./upload');
// Set up a route for file uploads
app.post('/upload', upload.single('file'), (req, res) => {
// Handle the uploaded file
res.json({ message: 'File uploaded successfully!' });
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
}); 第 5 步：建立 HTML 表單
在此步驟中，您将建立一個 HTML 表單，允許使用者選擇檔案并将其上傳到您的伺服器。表單将使用 POST 方法送出，并将具有“multipart/form-data”編碼類型來處理檔案上傳：
要建立 HTML 表單，您将使用具有以下屬性的<form>元素：
- action：此屬性指定送出表單時表單資料将發送到的 URL 或路由。在這種情況下，您會将 action 屬性設定為“ /upload”，這是您在第 4 步中建立的用于處理檔案上傳的路由。
- method：此屬性指定送出表單時要使用的 HTTP 方法。對于檔案上傳，您應該使用 POST 方法，因為它允許發送更大量的資料。是以，将方法屬性設定為“POST”。
- enctype：此屬性指定用于送出表單資料的内容類型。對于檔案上傳，您需要将 enctype 屬性設定為“multipart/form-data”。這種編碼類型是浏覽器正确處理檔案上傳所必需的。
在表單内，您将添加一個“檔案”類型的< input >元素。該元素允許使用者從他們的本地機器中選擇一個檔案。給 input 元素一個name屬性，以便在送出表單時可以識别它。在此示例中，名稱屬性設定為“檔案”。您可以根據需要調整名稱屬性值。
最後，您可以根據需要添加任何其他表單字段或送出按鈕。送出表單時，所選檔案将被發送到指定的路由進行處理。
通過建立此 HTML 表單，使用者将能夠使用提供的輸入字段選擇檔案并将其上傳到您的伺服器。
<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
</head>
<body>
<h1>File Upload</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file" required>
<button type="submit">Upload</button>
</form>
</body>
</html> 第 6 步：測試檔案上傳
通過在項目的根目錄中運作 node server.js 來啟動你的伺服器。打開浏覽器并導航到localhost:3000。您應該會看到一個檔案上傳表單。選擇一個檔案并單擊“上傳”按鈕。如果一切設定正确，您應該會收到一條 JSON 響應，内容為“檔案上傳成功！”。
就是這樣！您已經使用 Multer 成功簡化了檔案上傳過程。
Multer 提供額外的功能和選項來處理各種場景，例如上傳多個檔案或設定檔案大小限制。檢視 Multer 文檔了解更多詳細資訊和自定義選項。
結論
在本教程中，您學習了如何使用 Multer 簡化檔案上傳過程，Multer 是一個強大的 Node.js 中間件。使用 Multer，您可以通過配置存儲選項、處理單個或多個檔案上傳以及自定義流程的各個方面來輕松處理檔案上傳。
通過利用 Multer，您可以增強 Web 應用程式的功能并節省處理檔案上傳的時間和精力。
請記住浏覽 Multer 的文檔以了解進階選項和功能，例如驗證、錯誤處理以及與雲存儲服務的內建。
編碼愉快！
（更|多優質内|容：java567 點 c0m）
![如何使用Golang的Gin架構渲染HTML頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)