本地环境下Node.js Express服务器图片上传失败问题求助

一、浏览器控制台错误无需关注 #

你看到的DevTools failed to load source map错误是Chrome扩展（ID为fheoggkfdfchfphceeifdbepaooicaho）的资源加载问题，和图片上传功能完全无关，直接忽略即可。

二、图片未写入目标文件夹的核心修复方案 #

你的代码存在两个关键问题，导致文件无法正确写入：

1. 路径拼接错误 #

手动拼接路径时缺少文件夹与文件名之间的斜杠，导致路径格式错误。比如原代码会生成/项目路径/images/home图片名.jpg这种无效路径，需修正为：

// 手动补全斜杠
image.mv(__dirname + '/images/home/' + image.name);

更稳妥的方式是使用Node.js内置的path模块拼接路径，避免手动处理斜杠的问题：

const path = require('path');
// ...
const targetPath = path.join(__dirname, 'images', 'home', image.name);
image.mv(targetPath);

2. 未处理异步方法的错误 #

image.mv是异步方法，原代码未捕获移动文件时可能出现的错误（比如文件夹不存在、权限不足），导致失败后无任何提示。推荐两种修复方式：

方式一：使用回调捕获错误

app.post('/upload', (req, res) => {
    const { image } = req.files;

    if (!image) {
        return res.sendStatus(400);
    } 

    const targetPath = path.join(__dirname, 'images', 'home', image.name);
    image.mv(targetPath, (err) => {
        if (err) {
            console.error('文件移动失败:', err);
            return res.sendStatus(500);
        }
        console.log({ image });
        res.redirect("/upload");
    });
});

方式二：使用async/await简化代码

app.post('/upload', async (req, res) => {
    try {
        const { image } = req.files;

        if (!image) {
            return res.sendStatus(400);
        } 

        const targetPath = path.join(__dirname, 'images', 'home', image.name);
        await image.mv(targetPath);
        console.log({ image });
        res.redirect("/upload");
    } catch (err) {
        console.error('文件上传失败:', err);
        res.sendStatus(500);
    }
});

3. 额外检查项 #

• 确认/images/home文件夹存在：如果文件夹不存在，mv方法会失败，可提前创建：

  const fs = require('fs');
  const uploadDir = path.join(__dirname, 'images', 'home');
  if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir, { recursive: true });
  }
  

• 检查服务器进程对目标文件夹的写入权限：若权限不足，需调整文件夹权限（比如Linux下执行chmod -R 755 ./images/home）。

内容的提问来源于stack exchange，提问作者DVillan