Node.js Mongoose实现博客编辑功能时表单提交获取请求值为undefined如何解决

1. 表单编码类型与解析中间件不匹配 #

你提交表单时用了enctype="multipart/form-data"编码格式，这类格式用于传输文件数据，但Express 原生的express.urlencoded()、express.json()中间件不支持解析该格式的请求体，所以req.body下的所有字段都会返回undefined。

解决方法： #

安装Express官方推荐的form-data解析中间件multer：

• 第一步安装依赖：

npm install multer

• 第二步引入并配置multer：

const multer = require('multer');
// 自定义文件存储规则，可根据自身需求调整
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/uploads/') // 需提前创建该存储文件夹
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname)
  }
})
const upload = multer({ storage: storage })

• 第三步调整/editDone路由配置，引入multer中间件：

// single参数对应表单内文件上传控件的name属性值myFile
app.post('/editDone', upload.single('myFile'), (req,res)=>{
  const newTitle = req.body.tit;
  const newDesc = req.body.des;
  // 未上传新文件时默认使用原有图片地址
  const newFile = req.file ? req.file.filename : req.body.oldImg; 
  const edit2Id = req.body.btnIdd;
  console.log(newTitle)

  Blogdata.findOneAndUpdate({_id: edit2Id}, {title: newTitle, description: newDesc, img: newFile}, (err)=>{
      if(err){
          console.log("failed to update")
      }else{
          console.log("Updated Successfully")
          res.redirect('/') // 补充跳转逻辑，避免请求挂起
      }
  })
})

2. EJS模板问题修复 #

你当前的EJS代码存在三个小问题，也会影响正常提交：

• input的value属性末尾多了冗余空格，会导致提交的内容末尾自带多余空格
• 缺少原有图片地址的隐藏域，用户未上传新图片时无法复用原有图片
• 缺少</form>闭合标签

修正后的EJS代码如下：

<%- include("partials/head") %> 

<form action="/editDone" method="POST" enctype="multipart/form-data">
<!-- 新增隐藏域存储原有图片地址 -->
<input type="hidden" name="oldImg" value="<%= data.img %>">
<div class="form-group-login">
    <label for="title">Title</label>
    <input type="text" name="tit" id="title" value="<%= data.title %>">
</div>
<div class="form-group-login">
    <label for="desc">Description</label>
    <input type="text" name="des"  id="desc" value="<%= data.description %>">
</div>
<div class="form-group-login">
    <input type="file" name="myFile" class="fileForm">
</div>
<button type="submit" class="btn-form-login" name="btnIdd" value="<%=data._id %>">Submit</button>
</form>

3. 全局中间件检查 #

如果项目中没有配置普通POST请求的解析中间件，需要在代码顶部补充以下配置，用于处理非文件上传类的POST请求：

app.use(express.urlencoded({ extended: true }))
app.use(express.json())

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