使用 JavaScript 與 Node.js 實現檔案上傳與儲存到伺服器

Pochi

更新於 2024/12/29發佈於 2024/12/29閱讀時間約 9 分鐘

檔案上傳是許多網站的核心功能，無論是上傳圖片、文件，甚至是大型的資料檔案。本文將教您如何使用 JavaScript 與 Node.js 搭配 Express 與 Multer 套件，實現檔案上傳功能，並將檔案儲存至伺服器指定的目錄中。

Sigmund null on Unsplash

必要工具

在開始實作前，請先安裝以下工具與套件：

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('不支援的檔案類型'));
    }
  },
});