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

更新於 發佈於 閱讀時間約 8 分鐘

簡介

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


實現目標

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


開始前準備

所需環境

  1. Node.js 安裝(下載 Node.js)。
  2. 文本編輯器(建議使用 VS Code)。

專案結構

建立以下目錄與文件:

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


初始化專案

  1. 在終端中執行以下指令來初始化專案並安裝必要套件:
npm init -y
npm install express multer ejs
  1. 安裝完成後,專案的目錄結構將包含一個 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);
}


啟動專案

  1. 在終端執行以下指令啟動伺服器:
node app.js
  1. 打開瀏覽器,訪問 http://localhost:3000。


延伸功能

  1. 分類管理:為每張圖片加入分類功能。
  2. 檔案限制:限制檔案類型與大小(如 JPG/PNG,不超過 5MB)。
  3. 圖片刪除:增加圖片刪除功能。
  4. 部署:將應用程式部署至伺服器(如 Vercel 或 Heroku)。

如果有任何問題或想添加新功能,歡迎討論!

留言
avatar-img
留言分享你的想法!
avatar-img
程式輕鬆玩
71會員
150內容數
這裡將以輕鬆風格,深入探討程式設計的基礎和高級概念。從程式語言到演算法,我們將以易懂的方式解釋每個主題,讓你輕鬆掌握。無論你是初學者或有經驗者,都能在這裡找到適合你的內容。無論你的目標是成為專業開發者還是擴展知識,我們都會陪伴你一同成長!
程式輕鬆玩的其他內容
2025/04/20
本週科技圈掀起多項重磅消息:OpenAI於4月14日釋出GPT‑4.1系列模型,進一步強化編碼與長文理解能力 Reuters;Chipolo推出POP藍牙追蹤器,同時支援Apple與Google尋找網路 The Verge;南韓新創RLWRLD完成1,480萬美元募資,將打造專屬機器人基礎模型
Thumbnail
2025/04/20
本週科技圈掀起多項重磅消息:OpenAI於4月14日釋出GPT‑4.1系列模型,進一步強化編碼與長文理解能力 Reuters;Chipolo推出POP藍牙追蹤器,同時支援Apple與Google尋找網路 The Verge;南韓新創RLWRLD完成1,480萬美元募資,將打造專屬機器人基礎模型
Thumbnail
2025/04/20
本週遊戲動態涵蓋經典 25 週年重返 PC 平台、回合制策略新作重燃星戰熱潮、Remedy 荒誕合擊新作搶先曝光、Game Pass 下架名單震撼登場,以及 Steam 獨立新秀推薦不容錯過 PC GamerWindows Central。
Thumbnail
2025/04/20
本週遊戲動態涵蓋經典 25 週年重返 PC 平台、回合制策略新作重燃星戰熱潮、Remedy 荒誕合擊新作搶先曝光、Game Pass 下架名單震撼登場,以及 Steam 獨立新秀推薦不容錯過 PC GamerWindows Central。
Thumbnail
2025/04/08
近來因為川普政府啟動全新一輪對等關稅政策,全球貿易風暴席捲而來,而台灣面臨的衝擊更是不容小覷。美方以台灣過去對美出口關稅達64%為依據,採取「對等關稅」原則回敬徵收32%關稅,這一舉措不僅使得國際市場恐慌連連,台股也出現劇烈下跌,吸引了各界關注。
Thumbnail
2025/04/08
近來因為川普政府啟動全新一輪對等關稅政策,全球貿易風暴席捲而來,而台灣面臨的衝擊更是不容小覷。美方以台灣過去對美出口關稅達64%為依據,採取「對等關稅」原則回敬徵收32%關稅,這一舉措不僅使得國際市場恐慌連連,台股也出現劇烈下跌,吸引了各界關注。
Thumbnail
看更多
你可能也想看
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
簡介 本篇教學將帶您使用 Node.js 和 JavaScript 實現一個簡易相簿功能,具備圖片上傳、顯示以及查看原圖的功能。我們將利用 Express 框架以及 multer 中介軟體處理文件上傳,並使用 EJS 作為模板引擎來呈現網頁內容。 實現目標 相簿首頁:顯示所有已上傳的圖片。
Thumbnail
簡介 本篇教學將帶您使用 Node.js 和 JavaScript 實現一個簡易相簿功能,具備圖片上傳、顯示以及查看原圖的功能。我們將利用 Express 框架以及 multer 中介軟體處理文件上傳,並使用 EJS 作為模板引擎來呈現網頁內容。 實現目標 相簿首頁:顯示所有已上傳的圖片。
Thumbnail
檔案上傳是許多網站的核心功能,無論是上傳圖片、文件,甚至是大型的資料檔案。本文將教您如何使用 JavaScript 與 Node.js 搭配 Express 與 Multer 套件,實現檔案上傳功能,並將檔案儲存至伺服器指定的目錄中。
Thumbnail
檔案上傳是許多網站的核心功能,無論是上傳圖片、文件,甚至是大型的資料檔案。本文將教您如何使用 JavaScript 與 Node.js 搭配 Express 與 Multer 套件,實現檔案上傳功能,並將檔案儲存至伺服器指定的目錄中。
Thumbnail
※ Express串接MySQL相關套件介紹 ★ Express 資料庫設定套件,mysqljs和 mysql2比較 相同點:都是讓 Node.js 能使用 MySQL 的套件 (package)。安裝之後我們就能在 Node.js application 裡使用 SQL 指令,操作 SQL
Thumbnail
※ Express串接MySQL相關套件介紹 ★ Express 資料庫設定套件,mysqljs和 mysql2比較 相同點:都是讓 Node.js 能使用 MySQL 的套件 (package)。安裝之後我們就能在 Node.js application 裡使用 SQL 指令,操作 SQL
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
建立一個屬於自己喜愛球員的清單。 ※ 專案開發環境 架設 Node.js 伺服器。 用 Express.js 進行全端開發。 用 MongoDB 資料庫。 ※ 專案開發技術 使用 Express handlebars,為球員清單做出佈局和局部樣板
Thumbnail
建立一個屬於自己喜愛球員的清單。 ※ 專案開發環境 架設 Node.js 伺服器。 用 Express.js 進行全端開發。 用 MongoDB 資料庫。 ※ 專案開發技術 使用 Express handlebars,為球員清單做出佈局和局部樣板
Thumbnail
這篇想來寫,剛碰到js得時候,為了讓程式可以運作而安裝Node.js 。Node.js 是能夠在伺服器上面運行 JavaScript 的應用平台環境,透過 Node.js 提供的函式庫與執行環境能完成伺服器端服務。此篇幅就直接從純後端的角度切入摟(對不起拉我寫來寫去還是不知道怎麼順順的寫好文章開頭Q
Thumbnail
這篇想來寫,剛碰到js得時候,為了讓程式可以運作而安裝Node.js 。Node.js 是能夠在伺服器上面運行 JavaScript 的應用平台環境,透過 Node.js 提供的函式庫與執行環境能完成伺服器端服務。此篇幅就直接從純後端的角度切入摟(對不起拉我寫來寫去還是不知道怎麼順順的寫好文章開頭Q
Thumbnail
寫一封email是現在人的日常,用程式發送email本來以為是一件難事,但自從摸了一下Nodemailer以後世界就變得不一樣 甚至使用Nodemailer搭配Express就可以製作出簡易發送Email的API給自己使用(or別人),馬上進入主題 首先你要有一個nodejs的server,會看這篇
Thumbnail
寫一封email是現在人的日常,用程式發送email本來以為是一件難事,但自從摸了一下Nodemailer以後世界就變得不一樣 甚至使用Nodemailer搭配Express就可以製作出簡易發送Email的API給自己使用(or別人),馬上進入主題 首先你要有一個nodejs的server,會看這篇
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News