从零搭建本地支持分类搜索批量上传的轻量级图片档案管理系统实操

一、前置准备（必做）

1. 安装Node.js运行环境

直接访问Node.js官方LTS版本下载页：https://nodejs.org/zh-cn/download/，选择与你电脑系统匹配的安装包（Windows选.msi，Mac选.pkg），安装时直接点击“Next”即可，无需额外配置。

安装完成后，打开终端（Windows用CMD或PowerShell，Mac用Terminal），分别输入以下2条命令验证安装成功：

``` node -v npm -v ```

若终端显示类似v20.12.2、10.5.0的版本号，说明环境正常。

2. 安装MongoDB本地数据库

访问MongoDB Community Server LTS版本下载页：https://www.mongodb.com/try/download/community，选择系统后点击“Download”安装包（Windows选MSI，Mac选.dmg）。

安装时重点注意：Windows用户勾选“Install MongoDB as a Service”（安装为服务），Mac用户按提示拖拽图标即可；安装完成后无需手动启动服务，会自动后台运行。

同样打开终端，输入以下命令验证：

``` mongod --version ```

显示类似v7.0.9的版本号即可。

3. 创建项目文件夹

在桌面或其他方便的位置新建一个纯英文无空格的文件夹，比如命名为local-img-archive，后续所有操作都在这个文件夹内进行。

二、后端代码实现（可直接复制）

1. 初始化后端项目

打开终端，切换到刚才创建的文件夹：

``` cd 桌面/local-img-archive Windows如果是中文用户名，路径加双引号 ```

初始化Node.js项目，一路按回车默认配置：

``` npm init -y ```

安装必要的依赖包：

``` npm install express mongoose multer cors --save ```

依赖说明：express是Web框架，mongoose是MongoDB操作工具，multer是文件上传中间件，cors解决跨域问题。

2. 编写后端核心代码

在local-img-archive文件夹内新建2个文件和1个文件夹：index.js（主入口）、package.json（已自动生成无需新建）、uploads（存储上传图片的文件夹）。

打开index.js，直接复制以下完整代码：

```javascript const express = require('express'); const mongoose = require('mongoose'); const multer = require('multer'); const cors = require('cors'); const path = require('path'); const fs = require('fs'); // 1. 初始化服务 const app = express(); const PORT = 3001; // 2. 中间件配置 app.use(cors()); app.use(express.json()); // 静态资源访问：打开uploads文件夹下的图片 app.use('/images', express.static(path.join(__dirname, 'uploads'))); // 3. 连接MongoDB mongoose.connect('mongodb://127.0.0.1:27017/localImgArchive') .then(() => console.log('MongoDB连接成功')) .catch(err => console.error('MongoDB连接失败：', err)); // 4. 定义图片数据模型 const imgSchema = new mongoose.Schema({ filename: String, // 存储的文件名 originalname: String, // 上传的原文件名 category: String, // 分类 uploadTime: { type: Date, default: Date.now } // 上传时间 }); const Img = mongoose.model('Img', imgSchema); // 5. Multer文件上传配置 const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, 'uploads'); }, filename: (req, file, cb) => { // 生成唯一文件名防止覆盖：原文件名_时间戳.后缀 const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() 1E9); const ext = path.extname(file.originalname); cb(null, file.fieldname + '-' + uniqueSuffix + ext); } }); const upload = multer({ storage: storage }); // 6. 后端接口 // 接口1：批量上传图片，参数category可选 app.post('/api/upload', upload.array('images', 20), async (req, res) => { const category = req.body.category || '未分类'; try { const imgData = req.files.map(file => ({ filename: file.filename, originalname: file.originalname, category: category })); await Img.insertMany(imgData); res.json({ code: 200, msg: '上传成功', data: imgData }); } catch (err) { res.json({ code: 500, msg: '上传失败：' + err.message }); } }); // 接口2：获取所有图片或按分类搜索 app.get('/api/images', async (req, res) => { const category = req.query.category; try { let query = {}; if (category) query.category = category; const images = await Img.find(query).sort({ uploadTime: -1 }); res.json({ code: 200, data: images }); } catch (err) { res.json({ code: 500, msg: '获取失败：' + err.message }); } }); // 接口3：删除图片（同时删除文件和数据库记录） app.delete('/api/images/:id', async (req, res) => { try { const img = await Img.findById(req.params.id); if (!img) return res.json({ code: 404, msg: '图片不存在' }); // 删除本地文件 fs.unlinkSync(path.join(__dirname, 'uploads', img.filename)); // 删除数据库记录 await Img.findByIdAndDelete(req.params.id); res.json({ code: 200, msg: '删除成功' }); } catch (err) { res.json({ code: 500, msg: '删除失败：' + err.message }); } }); // 7. 启动服务 app.listen(PORT, () => console.log(`后端服务已启动，地址：http://127.0.0.1:${PORT}`)); ```

3. 启动后端服务

在终端输入以下命令：

``` node index.js ```

看到“MongoDB连接成功”和“后端服务已启动”，说明后端正常，终端不要关闭。

三、前端页面实现（可直接复制）

1. 新建前端HTML文件

在local-img-archive文件夹内新建一个index.html文件，直接复制以下完整代码：

```html 本地图片档案管理系统 ```

2. 打开前端页面

直接双击index.html文件，浏览器会自动打开，现在可以使用所有功能了。

四、日常使用注意事项

• 每次使用前必须先启动后端服务：打开终端，切换到项目文件夹，输入node index.js，终端不要关闭
• 上传的图片存储在项目的uploads文件夹内，不要手动删除或修改文件名
• 如果需要添加新的分类，修改index.html中两个select标签的option即可，无需重启后端
• 若MongoDB未自动启动，Windows用户可以在“服务”中找到MongoDB并手动启动，Mac用户打开终端输入mongod --dbpath /usr/local/var/mongodb（具体路径参考安装时的提示）