Express设置表单enctype为multipart/form-data时req.body返回空对象排查

问题结论 #

该问题与EJS模板引擎完全无关，模板引擎仅负责前端页面渲染，只要表单的enctype、字段name属性配置正确，不会影响后端请求解析逻辑。你之前使用Pug、Handlebars开发未出现问题，是因为当时的multer调用逻辑没有错误。

问题原因 #

Express内置的express.urlencoded、express.json中间件仅支持解析application/x-www-form-urlencoded、application/json类型的请求体，multipart/form-data类型的请求体必须由multer这类专门的中间件解析。只要multer配置、调用正确，解析完成后会自动将普通表单字段挂载到req.body，上传文件挂载到req.file。

你当前的代码存在三个直接导致问题的错误：

• multer配置项拼写错误：configMulter对象的键名错误写为sotrage，正确应为storage
• upload方法参数顺序传反：multer生成的上传中间件参数顺序为(req, res, callback)，你的代码写为upload(res, req, function(error))，将req、res对象颠倒，导致multer无法读取请求内容完成解析
• 错误判断变量名错误：回调内判断的变量名是errores，但传入的参数名为error，变量未定义会导致逻辑异常

修正后的代码 #

const multer = require('multer');
const Grupos = mongoose.model('Grupos');
const shortid = require('shortid');
const configMulter = {
    // 修正拼写错误
    storage: multer.diskStorage({
        destination: (req, file, next) => {
            next(null, __dirname+'\\..\\public\\uploads\\grupos');
        },
        filename: (req, file, next) => {
            const extension = file.mimetype.split('/')[1];
            next(null, `${shortid.generate()}.${extension}`);
        }
    })
}

const upload = multer(configMulter).single('imagen');

exports.subirImagen = (req, res, next) => {
    // 修正参数顺序
    upload(req, res, function(error) {
        // 修正变量名
        if(error){
            console.log(error);
            return res.status(500).send('文件上传失败');
        }
        next();
    })
}

额外注意事项 #

确保前端表单内文件上传框的name属性值和multer(config).single('imagen')的参数完全一致，普通表单字段需要放在同一个form标签内，即可在后续业务逻辑中正常读取req.body的普通字段和req.file的文件信息。

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