body-parser长度限制报错时，无刷新Flash错误并保留表单数据的问询

首先，你的核心需求是在表单提交触发body-parser的entity.too.large错误时，不跳转、不刷新页面，直接在原创建页面显示错误提示，同时保留用户已经输入的表单数据。目前的错误处理器只是添加了flash消息，但没有完成后续的页面渲染逻辑，所以导致无法正常显示。下面分步骤给出解决方案：

1. 修改后端错误处理器，直接渲染创建页面 #

当捕获到entity.too.large错误时，不要依赖重定向（重定向会丢失表单数据），而是直接渲染你的创建页面模板，同时将错误消息和表单数据传递给模板：

app.use((err, req, res, next) => {
  if (err && err.type === 'entity.too.large') {
    // 定义错误提示内容
    const errorMessage = '提交内容过大，请减少内容后重试';
    // 初始化表单数据对象
    let formData = {};
    
    // 手动解析原始请求体（需要先提前收集原始数据）
    if (req.headers['content-type']?.includes('application/x-www-form-urlencoded') && req.rawBody) {
      formData = new URLSearchParams(req.rawBody);
    }

    // 直接渲染创建页面，传递错误消息和表单数据
    res.render('create-page', {
      danger: errorMessage, // 对应模板中的错误提示变量
      formData: formData // 用于回显用户输入的表单内容
    });
  } else {
    next(err); // 将其他错误传递给默认处理器处理
  }
});

关键前置步骤：收集原始请求体 #

因为body-parser在遇到超过限制的请求时不会解析req.body，所以你需要在body-parser之前添加一个中间件来收集原始请求体：

app.use((req, res, next) => {
  let rawBody = '';
  req.on('data', chunk => {
    rawBody += chunk;
  });
  req.on('end', () => {
    req.rawBody = rawBody;
    next();
  });
});
// 再挂载你的body-parser配置
app.use(bodyParser.urlencoded({ limit: '100kb', extended: true }));

这样在错误处理器里就能通过req.rawBody获取到用户提交的原始表单数据，再手动解析后用于页面回显。

2. 模板中回显表单数据并显示错误消息 #

在你的创建页面模板中，需要完成两个核心操作：显示错误提示、回显用户之前输入的内容。以EJS模板为例：

<!-- 显示错误消息 -->
<% if (danger) { %>
  <div class="alert alert-danger"><%= danger %></div>
<% } %>

<!-- 表单字段回显数据 -->
<form method="POST" action="/create">
  <div class="form-group">
    <label for="content">内容</label>
    <textarea name="content" id="content" class="form-control"><%= formData?.get('content') || '' %></textarea>
  </div>
  <!-- 其他表单字段按照同样逻辑回显 -->
  <button type="submit" class="btn btn-primary">提交</button>
</form>

3. 前端优化（可选） #

为了提升用户体验，你可以在前端添加提交前的大小验证，提前拦截过大的内容，避免触发后端错误：

document.querySelector('form').addEventListener('submit', (e) => {
  const contentInput = document.getElementById('content');
  // 计算内容的大致字节大小
  const contentSize = new Blob([contentInput.value]).size;
  // 和后端设置的limit保持一致（这里是100kb）
  if (contentSize > 102400) {
    e.preventDefault();
    alert('内容过大，请减少后重试');
  }
});

这样就能实现：当用户提交的内容超过限制时，后端捕获错误并直接渲染原创建页面，显示错误消息，同时完整保留用户之前输入的表单数据，完全不需要刷新或重定向页面。

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