本文详解如何在 node.js 后端实现「点击删除按钮时，既从 mysql 删除记录，又从服务器文件系统移除对应图片文件」，涵盖前端事件监听、api 调用、后端文件路径构造与安全删除逻辑。
本文详解如何在 node.js 后端实现「点击删除按钮时，既从 mysql 删除记录，又从服务器文件系统移除对应图片文件」，涵盖前端事件监听、api 调用、后端文件路径构造与安全删除逻辑。
要实现点击删除按钮后同时删除数据库记录和服务器上的图片文件，需从前端传入图片路径（或文件名），并在后端使用 Node.js 的 fs 模块执行物理删除。当前代码存在两个关键问题：一是前端未将图片信息（如文件名或存储路径）发送至后端；二是后端 app.delete() 路由中错误地尝试从 request.params 解构 img，但该参数并未被前端传递。
✅ 正确实现步骤
1. 前端：修改 deleteRowById()，携带图片路径
假设每行数据在渲染表格时已包含图片文件名（例如
Wjs Localizing Video
下载
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
function deleteRowById(id, imgPath) {
fetch(`http://localhost:5000/delete/${id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ img: imgPath }) // 显式发送图片路径
})
.then(response => response.json())
.then(data => {
if (data.success) {
location.reload();
}
})
.catch(err => console.error('Delete failed:', err));
}
// 修改事件监听器，提取 data-img
document.querySelector('table tbody').addEventListener('click', function(event) {
if (event.target.className === "delete-row-btn") {
const id = event.target.dataset.id;
const img = event.target.dataset.img; // ✅ 从 DOM 属性读取
deleteRowById(id, img);
}
if (event.target.className === "edit-row-btn") {
handleEditRow(event.target.dataset.id);
document.querySelector('#btn').click();
}
});
2. 后端：接收图片路径并安全删除文件
在 app.js 中更新删除路由，使用 req.body.img 获取路径，并结合 fs.unlink() 删除文件。务必校验路径安全性，防止路径遍历攻击：
const fs = require('fs').promises;
const path = require('path');
app.delete('/delete/:id', async (req, response) => {
const { id } = req.params;
const { img } = req.body; // ✅ 从请求体获取
// ? 安全校验：仅允许删除指定目录下的文件
const allowedDir = path.join(__dirname, 'uploads'); // 图片实际存储目录
const targetPath = path.join(allowedDir, path.basename(img)); // 忽略恶意路径
// 防止 ../ 等路径遍历
if (!targetPath.startsWith(allowedDir)) {
return response.status(400).json({ success: false, error: 'Invalid image path' });
}
try {
// 先删除文件（若存在）
await fs.access(targetPath); // 检查文件是否存在
await fs.unlink(targetPath);
} catch (err) {
if (err.code !== 'ENOENT') {
console.error('File deletion error:', err);
}
// 文件不存在不中断流程，继续删数据库
}
// 再删除数据库记录
const db = dbService.getDbServiceInstance();
try {
const result = await db.deleteRowById(id);
response.json({ success: result });
} catch (err) {
console.error('DB deletion error:', err);
response.status(500).json({ success: false, error: 'Database operation failed' });
}
});
⚠️ 注意事项
- 路径安全是核心：永远不要直接拼接 req.body.img，必须使用 path.basename() 提取文件名，并限定根目录。
- 异步优先：使用 fs.promises 避免回调地狱，配合 async/await 提升可读性与错误处理能力。
- 容错设计：图片文件可能已被手动删除，fs.access() + fs.unlink() 的组合确保操作健壮。
- 数据库事务（进阶）：若需强一致性（如文件删了但 DB 删除失败），应引入事务或补偿机制，但 MySQL 对文件系统无事务支持，建议以 DB 为准，日志记录异常供人工核查。
完成以上改造后，点击删除按钮即可原子化完成「数据库记录清除」+「服务器图片清理」，兼顾功能完整性与生产环境安全性。
