檔案上傳是許多網站的核心功能，無論是上傳圖片、文件，甚至是大型的資料檔案。本文將教您如何使用 JavaScript 與 Node.js 搭配 Express 與 Multer 套件，實現檔案上傳功能，並將檔案儲存至伺服器指定的目錄中。
必要工具
在開始實作前，請先安裝以下工具與套件：
- Node.js 與 npm（Node.js 安裝時會自動包含 npm）。
- 安裝必要的 Node.js 套件：
npm install express multer建立專案目錄
創建一個專案目錄，並確保目錄結構如下：
project/
├── public/ // 用來放置前端檔案
│ └── index.html // 前端上傳介面
├── uploads/ // 儲存上傳檔案的目錄
├── server.js // 伺服器端程式碼
├── package.json // 套件資訊檔
└── package-lock.json // 自動生成的檔案
實作前端介面
前端部分提供一個檔案選擇器與按鈕，透過表單提交檔案。此範例加入了一個輸入框，讓使用者可以指定檔案的儲存路徑。
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>檔案上傳</title>
</head>
<body>
<h1>上傳檔案</h1>
<form id="uploadForm" enctype="multipart/form-data">
<input type="text" name="path" id="pathInput" placeholder="請輸入儲存路徑" />
<input type="file" name="file" id="fileInput" />
<button type="button" onclick="uploadFile()">上傳</button>
</form>
<script>
async function uploadFile() {
const fileInput = document.getElementById('fileInput');
const pathInput = document.getElementById('pathInput');
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('path', pathInput.value);
const response = await fetch('/upload', {
method: 'POST',
body: formData,
});
if (response.ok) {
alert('檔案上傳成功！');
} else {
alert('檔案上傳失敗');
}
}
</script>
</body>
</html>
建立伺服器端程式碼
使用 Express 與 Multer 在伺服器端處理檔案上傳，並根據前端指定的路徑儲存檔案。
server.js：
const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');
const app = express();
const PORT = 3000;
// 動態設定儲存目錄與檔案命名
const storage = multer.diskStorage({
destination: (req, file, cb) => {
const userPath = req.body.path || 'uploads'; // 預設為 uploads 資料夾
const fullPath = path.join(__dirname, userPath);
// 確保目錄存在
fs.mkdirSync(fullPath, { recursive: true });
cb(null, fullPath);
},
filename: (req, file, cb) => {
cb(null, `${Date.now()}-${file.originalname}`); // 用時間戳加檔名區分
},
});
const upload = multer({ storage });
// 提供靜態檔案
app.use(express.static(path.join(__dirname, 'public')));
// 接收檔案的路由
app.post('/upload', upload.single('file'), (req, res) => {
if (!req.file) {
return res.status(400).send('未選擇檔案');
}
res.send(`檔案已成功上傳到：${req.body.path || 'uploads'}`);
});
// 啟動伺服器
app.listen(PORT, () => {
console.log(`伺服器運行於 http://localhost:${PORT}`);
});
啟動專案
- 在專案目錄下執行以下指令，啟動伺服器：
node server.js
- 在瀏覽器中開啟
http://localhost:3000，並測試檔案上傳功能。 - 成功上傳後，檔案將儲存在前端輸入的指定路徑（如未指定，則預設為
uploads/資料夾）。
延伸功能
1. 限制檔案大小
可以設定最大檔案大小來避免伺服器資源耗盡。
const upload = multer({
storage,
limits: { fileSize: 5 * 1024 * 1024 }, // 最大 5MB
});
2. 支援多檔案上傳
app.post('/upload-multiple', upload.array('files', 10), (req, res) => {
if (!req.files || req.files.length === 0) {
return res.status(400).send('未選擇檔案');
}
res.send('多檔案上傳成功！');
});
3. 文件格式驗證
僅允許特定檔案類型：
const upload = multer({
storage,
fileFilter: (req, file, cb) => {
const fileTypes = /jpeg|jpg|png|pdf/; // 限制上傳格式
const mimeType = fileTypes.test(file.mimetype);
const extName = fileTypes.test(path.extname(file.originalname).toLowerCase());
if (mimeType && extName) {
cb(null, true);
} else {
cb(new Error('不支援的檔案類型'));
}
},
});
結語
透過上述的教學，我們實現了一個可指定儲存路徑的檔案上傳功能，並介紹了多種擴展功能。你可以根據實際需求進一步強化此功能，例如加入安全性檢查、進階的檔案分類邏輯，甚至整合到資料庫中儲存檔案資訊。
希望本文能幫助你了解檔案上傳的基礎概念與實作方式！
