Node.js EJS变量未定义问题：res.locals路由失效原因与解决

我是一名MERN栈开发者，无相关领域经验，在处理头像上传功能时遇到EJS变量未定义问题：在EJS模板中访问uploadedImage变量时，始终提示“uploadedImage is undefined”。但将res.locals.uploadedImage的设置逻辑放在全局中间件中时，变量可正常传递；而将其放在PUT路由的处理逻辑中，渲染模板时变量却未定义。

相关代码 #

EJS模板代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Fontawesome -->
    <script
      src="https://kit.fontawesome.com/42a182743f.js"
      crossorigin="anonymous"
    ></script>
    <!-- CSS -->
    <link rel="stylesheet" href="/css/uploadPhoto.css" />
    <title>Upload Profile Photo</title>
  </head>
  <body>
    <!-- nav-bar -->
    <%- include("../partials/navbar") %>

    <div class="form-container">
      <!-- icon -->
      <h1>Upload Profile photo</h1>
      <p>
        <!-- upload icon -->
      </p>
      <small class="error">
        <% if (uploadedImage) { %>
          <i class="fas fa-exclamation-circle"></i>
          <%= uploadedImage %>
        <% } %>
      </small>
      <form action="/api/v1/users/profile-photo-upload?_method=PUT" method="POST" enctype="multipart/form-data">
        <label for="email">Select Image</label>
        <input type="file" name="profile" id="image" />
        <button type="submit">
          <i class="fas fa-upload"></i>
        </button>
      </form>
    </div>
    <!-- footer -->
    <%- include("../partials/footer") %>
  </body>
</html>

PUT路由代码 #

app.put("/profile",async (req,res,next)=>{
    try {
        //check if no file if upload
        if(!req.file) return next(appErr("No profile image is uploaded"));
        //find the user to be updated
        const userID = req.session.userAuth;
        const findUser = await User.findById(userID);
        //if user not found
        if(!findUser) return next(appErr("User not found",403));
        //update profile photo
        const newUser = await User.findByIdAndUpdate(userID,{
            profileImage: req.file.path
        },{
            new: true
        });
         //if new file is uploaded then delete old one
         if(req.file && findUser.profileImage !== undefined){
            const public_id = extractPublicId(findUser.profileImage);
            cloudinary.uploader.destroy(public_id)
        };
      
        res.locals.uploadedImage = "Image Uploaded";
        res.render("users/uploadProfilePhoto");
    } catch (error) {
        return next(appErr(error.message));
    }
});

全局中间件代码 #

app.use((req,res,next)=>{
    if(req.session.userAuth){
        res.locals.uploadedImage = "File Uploaded";
    }else{
        res.locals.uploadedImage = null;
    }
    next();
});

问题原因 #

1. 路由路径不匹配：表单的action指向/api/v1/users/profile-photo-upload?_method=PUT，但你定义的PUT路由路径是/profile，请求根本没进入这个路由的处理逻辑，自然res.locals.uploadedImage没有被设置。
2. 请求未触发目标路由：全局中间件会在所有请求前执行，但如果表单提交的请求没匹配到你的PUT路由，路由里的变量设置代码完全不会运行，模板只能拿到全局中间件设置的值（甚至当req.session.userAuth不存在时是null）。

解决方案 #

方案1：修正路由路径匹配 #

把PUT路由的路径改成和表单action一致的路径，确保请求能进入目标路由：

app.put("/api/v1/users/profile-photo-upload",async (req,res,next)=>{
    try {
        //check if no file if upload
        if(!req.file) return next(appErr("No profile image is uploaded"));
        //find the user to be updated
        const userID = req.session.userAuth;
        const findUser = await User.findById(userID);
        //if user not found
        if(!findUser) return next(appErr("User not found",403));
        //update profile photo
        const newUser = await User.findByIdAndUpdate(userID,{
            profileImage: req.file.path
        },{
            new: true
        });
         //if new file is uploaded then delete old one
         if(req.file && findUser.profileImage !== undefined){
            const public_id = extractPublicId(findUser.profileImage);
            cloudinary.uploader.destroy(public_id)
        };
      
        res.locals.uploadedImage = "Image Uploaded";
        res.render("users/uploadProfilePhoto");
    } catch (error) {
        return next(appErr(error.message));
    }
});

方案2：直接在渲染时传递变量（更直观） #

如果不想依赖res.locals，可以直接在res.render的第二个参数中传入变量，避免中间件或路由顺序带来的问题：

// 替换路由中res.locals和res.render的代码
res.render("users/uploadProfilePhoto", { uploadedImage: "Image Uploaded" });

额外注意事项 #

• 确保已正确配置method-override中间件，因为表单用的是POST方法加_method=PUT，需要这个中间件识别PUT请求。
• 检查文件上传中间件（比如multer）是否配置正确，确保req.file能正常获取到上传的文件。

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