NodeJS/Multer同表单提交字段与文件：无法获取req.body和req.file

Hey there, I’ve run into this exact problem before—let’s break down what’s going on and how to fix it quickly.

The Root Cause #

You’re spot-on that body-parser doesn’t handle multipart/form-data requests at all. That’s why even though your file is ending up in the target folder, Express can’t parse the form fields or attach file metadata to req.file/req.body properly. body-parser only works with application/json and application/x-www-form-urlencoded encodings, which don’t support file uploads.

The Solution: Use Multer #

Multer is the standard middleware for handling multipart/form-data in Express, built specifically for file upload scenarios. It’ll parse both your file(s) and accompanying form fields, populating req.file/req.files and req.body correctly.

Here’s how to set it up step by step:

1. Install Multer
   Run this command in your project directory:

   npm install multer
   

2. Configure Multer for Storage
   Define where your files should be saved and how they’ll be named (replace the folder path with your target directory):

   const express = require('express');
   const multer = require('multer');
   const app = express();
   
   // Set up storage location and filename rules
   const storage = multer.diskStorage({
     destination: (req, file, cb) => {
       cb(null, './your-target-folder'); // Your upload folder path
     },
     filename: (req, file, cb) => {
       // Keep original filename, or add a timestamp to avoid duplicates
       cb(null, file.originalname);
     }
   });
   
   // Initialize multer with your storage config
   const upload = multer({ storage: storage });
   

3. Update Your Route to Use Multer
   Attach the multer middleware to your /new route. Use upload.single('file') for a single file upload (replace 'file' with the name attribute of your frontend file input). For multiple files, use upload.array('files', 5) (where 5 is the max number of files) or upload.fields() for mixed field types.

   Example route:

   app.post('/new', upload.single('file'), (req, res) => {
     // Now req.file and req.body will be populated correctly!
     console.log('Uploaded file details:', req.file);
     console.log('Form fields:', req.body);
   
     res.status(200).json({
       message: 'Upload successful',
       uploadedFile: req.file,
       formData: req.body
     });
   });
   
   app.listen(3000, () => console.log('Server running on port 3000'));
   

Key Tips to Avoid Mistakes #

• Ensure your frontend form has enctype="multipart/form-data" set—this is required for file uploads to work.
• The string passed to upload.single() must match the name attribute of your file input (e.g., if your input is <input type="file" name="profilePic">, use upload.single('profilePic')).
• Multer automatically parses text form fields into req.body, so you don’t need extra middleware for those once Multer is active.

This should resolve the req.file undefined issue and let you access req.body properly instead of just seeing [object Object].

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