Node.js使用multer实现文件上传失败、浏览器持续加载问题求助

核心问题修复 #

1. 浏览器提交后一直加载的根因与解决 #

你当前的路由逻辑只在表单校验失败的分支返回了res.render响应，当校验通过时没有给客户端返回任何响应，Express不会自动结束请求，导致浏览器一直处于等待响应的加载状态。
另外注意两个常见的配置坑：

• multer不会自动创建目标存储目录，请提前手动在项目根目录创建public/uploads文件夹，目录不存在会抛出异常导致请求无响应
• 你当前配置的fieldSize是普通表单字段的大小限制，要限制上传文件大小需要改为fileSize

修正后的路由代码参考：

router.post('/register',upload.single('image'), [
    check('fname')
        .isLength({ min: 8 })
        .withMessage('First name must be minimum of 8 characters')
        .isAlpha()
        .withMessage('first name must contain only alphabeth'),
    check('lname').isLength({min:8}),
    check('email').isEmail()
  ], (req, res,next)=>{
    const errors = validationResult(req)
   
    if (!errors.isEmpty()) {
        console.log(errors)
        return res.render('users/register',{title:"Create Account", data:errors.array()});
    }
    // 校验通过后的业务逻辑，比如存库、记录信息等
    console.log('上传的文件信息：', req.file)
    console.log('表单数据：', req.body.fname, req.body.lname, req.body.email)
    // 必须返回响应，比如重定向到成功页或者首页
    return res.redirect('/success') // 或者 res.render('success') 渲染成功页面
})

2. 未渲染错误页面的异常捕获方法 #

捕获multer相关异常

可以手动调用multer中间件捕获上传过程中的错误：

router.post('/register', function(req, res, next) {
  upload.single('image')(req, res, function (err) {
    if (err instanceof multer.MulterError) {
      // 捕获multer本身的错误，比如文件超出大小等
      return res.render('users/register',{title:"Create Account", data:[{msg: '上传失败：' + err.message}]});
    } else if (err) {
      // 捕获其他未知上传错误
      return next(err)
    }
    // 上传正常，继续走后续校验逻辑
    next()
  })
}, [
  // 原有express-validator校验规则
], (req, res, next) => {
  // 原有业务逻辑
})

全局异常捕获

在所有路由定义的末尾添加Express官方的四参数错误处理中间件，即可捕获所有未处理的异常：

// 放在所有路由、其他中间件之后
app.use((err, req, res, next) => {
  console.error('未处理异常：', err)
  // 自定义返回逻辑，比如渲染统一错误页
  res.status(err.statusCode || 500).render('error', {
    message: '服务器暂时无法处理你的请求，请稍后再试'
  })
})

注意异步代码抛出的异常需要手动调用next(err)传递，才能被全局中间件捕获。

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