Node.js/Express表单配置multipart/form-data后图片加载失败入库异常怎么解决

问题核心原因 #

• Express 内置的 urlencodedParser 中间件仅支持解析 application/x-www-form-urlencoded 格式的表单数据，你给表单配置了 enctype="multipart/form-data" 用于文件上传后，该中间件无法解析对应格式的数据，导致 req.body 为空，触发逻辑异常才写入了"Avoid"值，同时文件没有被处理自然无法加载。
• 表单字段不匹配：校验逻辑里判断的是 req.body.comm 是否为空，但对应输入框的 name 属性写的是 salary，永远拿不到对应值，也会触发逻辑异常。

修复步骤 #

1. 安装用于解析 multipart/form-data 格式的中间件 multer，执行命令：
   npm install multer
2. 修正表单的字段名，把评论输入框的 name 改为和校验逻辑匹配的 comm
3. 调整服务端代码，引入multer配置，同时处理表单字段和上传的图片
4. 配置静态资源目录，保证上传后的图片可以正常访问

修正后的Handlebars表单代码 #

<form action="/target/" method="POST" enctype="multipart/form-data">
  <label for="name">Имя:</label>
    <input name="name"><br><br>
  <label for="age">Возраст:</label>
    <input name="age"><br><br>
  <label for="comm">Комментарий:</label>
  <input name="comm"><br><br>
  <label for="img">Картинка:</label>
  <input type="file" name="f">
    <input type="submit">
</form>

修正后的Node.js服务端代码 #

const multer = require('multer');
// 先在项目根目录手动创建uploads文件夹用于存储上传的图片
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/')
  },
  filename: function (req, file, cb) {
    // 加时间戳避免文件重名
    cb(null, Date.now() + '-' + file.originalname)
  }
})
const upload = multer({ storage: storage })

// 配置静态资源目录，后续可通过/your-domain/uploads/文件名访问图片
app.use('/uploads', express.static('uploads'))

mongoClient.connect(async function(error, mongo) {
    if (!error) {
        let db = mongo.db('NODE_db');
        let coll = db.collection('users');
        // 替换urlencodedParser为multer中间件，single('f')对应表单文件上传框的name属性
        app.post('/target/', upload.single('f'), async function(req, res) {
            //Validation
            if (!req.body.name || !req.body.age || !req.body.comm){
                return res.status(400).json({mess: "fill fields"})
            }
            // 组装写入数据库的数据，包含上传图片的存储路径
            const insertData = {
                ...req.body,
                imgPath: req.file.path
            }
            await coll.insertOne(insertData);
            res.redirect('/')
        });
    } else {
        console.error(error);
    }
});

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