Multer无法正常工作求助：文件上传失败且req.file始终为undefined

Hey there, let's work through your Multer problem where files won't upload and req.file is always undefined. Based on your code snippet, here are the most likely fixes to try:

1. Fix the destination path typo #

Looking at your code, you've got dest: 'public/imahe/' — that imahe looks like a typo (probably meant image!). Multer needs a valid, existing directory to save files; if the path is wrong, it can't store the file, which leads to req.file being undefined.

Update the Multer config to:

const upload = multer({ dest: 'public/image/' })

Also, make sure the public/image directory exists on your server. Multer won't automatically create nested directories, so you'll need to make it manually or use a package like mkdirp to generate it dynamically.

2. Match field names and use the correct req property #

You're using upload.single('imahe'), which tells Multer to look for a single file field named imahe in the request. But in your code, you're logging req.files (plural) — that's only used for multiple-file uploads (like upload.array() or upload.fields()). For single-file uploads, you need to log req.file (singular) instead.

Fix your console log line to:

console.log(req.file);

Also double-check that your frontend's file input has the exact name imahe (case-sensitive!) — if the name doesn't match, Multer won't pick up the file.

3. Ensure your frontend uses multipart/form-data #

This is a super common gotcha! If you're using an HTML form, you must set the enctype attribute to multipart/form-data — otherwise, the browser won't send the file data correctly:

<form action="/add" method="POST" enctype="multipart/form-data">
  <input type="text" name="pname" placeholder="Property Name">
  <!-- Other form fields -->
  <input type="file" name="imahe">
  <button type="submit">Submit</button>
</form>

If you're using AJAX/Fetch to upload, make sure you use FormData and don't manually set the Content-Type header (the browser will handle this automatically):

const formData = new FormData();
formData.append('imahe', document.querySelector('input[type="file"]').files[0]);
formData.append('pname', 'My Property');
// Add other fields as needed

fetch('/add', {
  method: 'POST',
  body: formData,
  // Do NOT add headers: { 'Content-Type': 'multipart/form-data' }
});

4. Check middleware order and router setup #

Make sure your isAuthenticated middleware isn't consuming the request body before Multer gets to it. If isAuthenticated uses express.json() or express.urlencoded() to parse the body, those middlewares can interfere with Multer's ability to parse multipart/form-data requests.

Your current middleware order (isAuthenticated → upload.single()) is okay, but confirm that isAuthenticated doesn't modify the request in a way that breaks Multer's parsing.

5. Add error handling to catch Multer issues #

To debug further, add an error handler specifically for Multer upload errors. This will help you spot issues like file size limits, invalid file types, or directory permissions:

router.post('/add', isAuthenticated, upload.single('imahe'), (req, res, next) => {
  console.log(req.body);
  console.log(req.file);
  // Your existing Property creation code here
}, (err, req, res, next) => {
  // Handle Multer-specific errors
  if (err instanceof multer.MulterError) {
    return res.status(400).send(`Upload error: ${err.message}`);
  } else if (err) {
    return res.status(500).send(`Server error: ${err.message}`);
  }
});

Try these steps one by one — the typo in the destination path and missing multipart/form-data are the most likely culprits here!

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