Multer中req.body正常但req.files返回undefined问题求助

核心问题分析 #

• 前端文件处理错误：document.querySelector('.imageInput').files返回的是FileList对象，直接append到FormData会被转为字符串[object FileList]，无法被Multer识别为有效文件。
• 未阻止表单默认提交行为：表单submit事件默认会触发页面刷新，可能导致fetch请求未完成就被中断。
• 后端Multer使用错误：upload.single('imageFile')对应读取req.file而非req.files；若前端允许多选文件，需改用upload.array('imageFile')来接收多文件。
• 存储目录未创建：Multer不会自动生成目标存储目录，若my-uploads/不存在，文件无法保存。

修正后的代码 #

HTML（若不需要多文件上传，可移除multiple="true"） #

<form class="blogForm" method="post" encType="multipart/form-data">
  <input type="file" class="imageInput" name="file" multiple="true"/>
  <div class="blogEntryDiv" contenteditable="true"></div>
  <input class="blogSubmitButton" type="submit" value="Submit">
</form>

前端JS #

document.querySelector('.blogForm').addEventListener('submit', (e) => {
  // 阻止表单默认刷新行为
  e.preventDefault();

  let formData = new FormData();
  let textContent = document.querySelector('.blogEntryDiv').innerText;
  let imageFiles = document.querySelector('.imageInput').files;

  formData.append('textcontent', textContent);
  // 遍历FileList，逐个添加文件到FormData
  for (let i = 0; i < imageFiles.length; i++) {
    formData.append('imageFile', imageFiles[i]);
  }

  fetch(`/someimage`, {
    method: 'POST',
    body: formData
  }).then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));
})

后端app.js #

const multer = require('multer');
const fs = require('fs');
const path = require('path');

// 自动创建存储目录（如果不存在）
const uploadDir = path.join(__dirname, 'my-uploads');
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, uploadDir);
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    // 保留原始文件扩展名
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
  }
});

// 接收多文件上传，若为单文件则改用upload.single('imageFile')
const upload = multer({ storage: storage });

app.post('/someimage', upload.array('imageFile'), (req, resp) => {
  console.log(req.body);
  console.log(req.files); // 现在会返回上传的文件数组
  resp.json({ success: true, files: req.files });
});

补充说明 #

• 若仅需单文件上传：前端移除multiple="true"，后端将upload.array('imageFile')改为upload.single('imageFile')，并通过req.file获取单个文件对象。
• 使用path.join(__dirname, 'my-uploads')确保存储路径的绝对正确性，避免相对路径引发的问题。

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