使用Multer上传图片至数据库后页面无法重定向问题

现象 #

• 更新用户资料时，不附加图片：数据库更新成功，页面正确重定向到个人资料页
• 附加图片：数据库中图片已成功更新，但页面停留在表单页，仅刷新，无错误提示，未执行重定向

排查与解决方案 #

1. 确认服务器是否执行了重定向逻辑 #

在路由的res.redirect前添加日志，验证服务器是否发送了重定向指令：

// 在res.redirect前添加
console.log("准备重定向至:", "/profile/" + req.params.username + "?msg=Profile updated successfully");
res.redirect("/profile/" + req.params.username + "?msg=Profile updated successfully");

• 如果控制台输出了这条日志，说明服务器已发送重定向响应，问题出在浏览器端：

  • 打开浏览器开发者工具（F12），查看网络请求：检查表单提交的POST请求的响应状态码是否为302，以及Location响应头是否正确指向目标页面
  • 确认浏览器控制台是否有JS报错，阻止了页面跳转

• 如果控制台没有输出这条日志，说明代码在执行到res.redirect前抛出了未被捕获的异常：

  • 检查fs.readFileSync(req.file.path)是否存在权限问题或文件丢失（虽然数据库已更新，但仍需确认读取文件时是否有隐性错误）
  • 尝试将fs.readFileSync改为异步读取，避免同步操作阻塞或抛出未捕获错误：

    // 替换原有的imageBase64赋值代码
    const imageBuffer = await fs.promises.readFile(req.file.path);
    const imageBase64 = imageBuffer.toString("base64");
    

2. 排查中间件是否影响响应 #

检查isUser和personalContent中间件，确认它们在处理带文件的请求时：

• 没有提前调用res.send、res.end等终止响应的方法
• 正确调用了next()传递请求到后续处理逻辑

3. 尝试前端跳转替代服务器重定向 #

如果服务器端重定向始终不生效，可以尝试用前端JS跳转替代：

// 替换原有的res.redirect
res.send(`
  <script>
    window.location.href = "/profile/${req.params.username}?msg=Profile updated successfully";
  </script>
`);

4. 验证重定向URL的正确性 #

确认req.params.username的值是否正确，避免生成无效的重定向地址：

console.log("当前用户名:", req.params.username);
console.log("重定向URL:", "/profile/" + req.params.username + "?msg=Profile updated successfully");

确保该URL可以正常访问，且与用户的个人资料页路径一致

代码参考（修改后的路由示例） #

var store = require("./multer");
const fs = require("fs").promises; // 改用异步fs

router.post("/:username/edit", isUser, personalContent, store.single("profilePic"), async (req, res) => {
    try {
        const updateData = {
            username: req.params.username,
            dateOfBirth: req.body.date,
        };

        if (req.file) {
            const imageBuffer = await fs.readFile(req.file.path);
            updateData.filename = req.file.originalname;
            updateData.contentType = req.file.mimetype;
            updateData.imageBase64 = imageBuffer.toString("base64");
        }

        await User.updateOne(
            { username: req.user.username },
            updateData,
            { upsert: true }
        );

        console.log("准备重定向至:", "/profile/" + req.params.username + "?msg=Profile updated successfully");
        res.redirect("/profile/" + req.params.username + "?msg=Profile updated successfully");
    } catch (err) {
        console.error("更新出错:", err);
        res.redirect("/profile/" + req.params.username + "?msg=Error while updating profile");
    }
});

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