使用 Node.js 與 JavaScript 開發簡易相簿功能

更新於 2024/12/31發佈於 2024/12/31閱讀時間約 8 分鐘

簡介

本篇教學將帶您使用 Node.js 和 JavaScript 實現一個簡易相簿功能，具備圖片上傳、顯示以及查看原圖的功能。我們將利用 Express 框架以及 multer 中介軟體處理文件上傳，並使用 EJS 作為模板引擎來呈現網頁內容。

Growtika null on Unsplash

實現目標

相簿首頁：顯示所有已上傳的圖片。
圖片上傳：提供用戶上傳圖片的功能。
圖片查看：可點擊縮圖查看原圖。

開始前準備

所需環境

Node.js 安裝（下載 Node.js）。
文本編輯器（建議使用 VS Code）。

專案結構

建立以下目錄與文件：

photo-album/
├── public/
│   ├── images/      # 儲存上傳的圖片
│   └── styles/      # 儲存 CSS 樣式
├── views/           # 儲存 EJS 模板
│   ├── index.ejs    # 相簿首頁模板
│   └── upload.ejs   # 上傳圖片頁面模板
├── app.js           # 主程式文件
└── package.json     # 專案描述文件

初始化專案

在終端中執行以下指令來初始化專案並安裝必要套件：

npm init -y
npm install express multer ejs

安裝完成後，專案的目錄結構將包含一個 node_modules 資料夾。

撰寫程式碼

1. `app.js`

撰寫核心伺服器邏輯：

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const app = express();
const PORT = 3000;

// 設定靜態檔案目錄
app.use(express.static('public'));

// 設定模板引擎
app.set('view engine', 'ejs');

// 設定 multer 儲存選項
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './public/images');
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}-${file.originalname}`);
  },
});
const upload = multer({ storage });

// 相簿首頁
app.get('/', (req, res) => {
  const imagesPath = path.join(__dirname, 'public/images');
  fs.readdir(imagesPath, (err, files) => {
    if (err) return res.status(500).send('無法讀取圖片');
    res.render('index', { images: files });
  });
});

// 上傳圖片頁面
app.get('/upload', (req, res) => {
  res.render('upload');
});

// 處理圖片上傳
app.post('/upload', upload.single('image'), (req, res) => {
  res.redirect('/');
});

// 啟動伺服器
app.listen(PORT, () => {
  console.log(`伺服器正在執行於 http://localhost:${PORT}`);
});

2. 模板文件

`views/index.ejs`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的相簿</title>
  <link rel="stylesheet" href="/styles/style.css">
</head>
<body>
  <h1>我的相簿</h1>
  <a href="/upload">上傳圖片</a>
  <div class="gallery">
    <% images.forEach(image => { %>
      <a href="/images/<%= image %>" target="_blank">
        <img src="/images/<%= image %>" alt="<%= image %>" width="200">
      </a>
    <% }) %>
  </div>
</body>
</html>

`views/upload.ejs`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>上傳圖片</title>
</head>
<body>
  <h1>上傳圖片</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image" required>
    <button type="submit">上傳</button>
  </form>
  <a href="/">返回相簿</a>
</body>
</html>

3. CSS 樣式

在 public/styles/ 資料夾中新增 style.css：

body {
  font-family: Arial, sans-serif;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery img {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
  transition: transform 0.2s;
}

.gallery img:hover {
  transform: scale(1.1);
}