使用Fetch API与FormData向MongoDB传数据遇500错误求助

我尝试用Fetch API和FormData向MongoDB发送数据，遇到了错误：POST https://xxxxxxxxxxxxxxxxxxxxxxxx/upload 500 (Internal Server Error)

前端EJS表单代码 #

<div id="image_data">        
    <form action="/upload" method="post">
        <p class="title_content">Gebe hier Daten über dein Foto an:</p>
        <br>
        <input type="hidden" value=<%= username %> name="username" />
        <br>
        <input id="Base64IMG" type="hidden" value="" name="imgBase64" />
        <br>
        <label for="city">Ort: </label>
        <input id="city" placeholder="Ort" name="city" type="text" />
        <br />
        <label for="date">Aufgenommen am: </label>
        <input id="date" placeholder="Datum" name="date" type="date" />
        <br />
        <textarea id="textarea" rows ="5" cols="40" placeholder="Beschreibe kurz dein Bild" name="description" ></textarea>
        <br>
        <input class="sub" type="submit" value="upload"/>
    </form>
</div>

Fetch API相关JavaScript代码 #

function toServer(formData){
   fetch('/upload', {
      method: 'POST',
      body: formData
    })
      .then(function(response) {
        if (response.ok) {
          console.log('POST-Request erfolgreich abgesendet');
          console.log(response)
          alert("hat geklappt")
          // 后续处理逻辑
        } else {
          console.log('Fehler beim Absenden des POST-Requests');
        }
      })
      .catch(function(error) {
        console.log('Fehler beim Absenden des POST-Requests:', error.message);
      });
}

const form = document.querySelector('#image_data > form')

form.addEventListener('submit', function(event) {
   event.preventDefault()
   const formData = new FormData(form)
   
   if (navigator.onLine) {
      toServer(formData)
    } else {
// 离线处理代码省略
}}

后端/upload路由代码 #

router.post("/upload", async (req,res) => {
  try {
    await img.create(req.body)
   if(true){
    res.status(200).json({message:true})
   }else{
    res.status(200).json({message:false})
   }
  } catch (error) {
      console.log(error.message);
      res.status(500).json({message: error.message})
  }
  console.log("upload wurde durchgeführt")
})

注：img是从Mongoose Schema导入的：const img = require("../database/picture");

服务器控制台错误日志 #

pictureData validation failed: description: Path `description` is required., date: Path `date` is required., city: Path `city` is required., imgBase64: Path `imgBase64` is required., username: Path `username` is required.

Mongoose Schema代码 #

const mongoose=require("mongoose")

const IMGSchema=new mongoose.Schema({
    username:{
        type:String,
        required:true
    },
    imgBase64:{
        type:String,
        required:true
    },
    city:{
        type:String,
        required:true
    },
    date:{
        type:String,
        type:Date,
        required:true
    },
    description:{
        type:String,
        required:true
    },
})

const img=new mongoose.model("pictureData", IMGSchema)

module.exports=img

问题定位与修复方案 #

核心问题 #

1. 后端无法解析FormData请求体：Express默认不支持解析multipart/form-data格式的数据，导致req.body为空，触发Mongoose所有必填字段的验证失败。
2. Schema日期字段定义错误：date字段重复声明了type属性，type:String会被type:Date覆盖，可能导致前端提交的日期字符串无法被正确解析。

修复步骤 #

1. 添加FormData解析中间件

安装并配置multer（专门处理multipart/form-data的Express中间件）：

npm install multer

修改路由代码：

const multer = require('multer');
const upload = multer(); // 仅解析文本字段，不处理文件

router.post("/upload", upload.none(), async (req,res) => {
  try {
    await img.create(req.body)
    res.status(200).json({message:true})
  } catch (error) {
      console.log(error.message);
      res.status(500).json({message: error.message})
  }
})

upload.none()表示只解析表单中的文本字段，适配你当前仅提交Base64字符串和表单文本的场景。

2. 修正Mongoose Schema的日期字段

删除重复的type:String，保留Date类型：

date:{
    type:Date,
    required:true
},

HTML5的date输入框默认提交YYYY-MM-DD格式的字符串，Mongoose会自动将其解析为Date类型，无需额外处理。

3. 验证前端字段填充

• 确保imgBase64隐藏字段在提交前已被正确赋值为图片的Base64字符串（当前代码初始值为空，需要在拍照/选图后更新该字段）。
• 确认EJS渲染的username值正确，可在前端打印formData内容验证：

form.addEventListener('submit', function(event) {
   event.preventDefault()
   const formData = new FormData(form)
   // 打印所有字段，检查是否存在值
   for (let [key, value] of formData.entries()) {
       console.log(`${key}: ${value}`);
   }
   if (navigator.onLine) {
      toServer(formData)
    } else {
// 离线处理代码省略
}}

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