AdonisJS 6中文件验证错误如何重定向回视图？

第一步：修改控制器代码，通过Session Flash传递错误 #

先在控制器的store方法里解构出session对象，文件验证失败时把错误信息存入session的flash缓存，再重定向回表单页面。同时建议处理表单其他字段的验证错误，并且保留用户之前的输入内容：

async store({ request, response, session }: HttpContext) {
  let payload
  try {
    // 处理表单其他字段的验证
    payload = await storeBookValidation.validate(request.all())
  } catch (error) {
    // 把字段验证错误存入flash
    session.flash('errors', error.messages)
    // 保留用户之前填写的所有表单数据
    session.flashAll()
    return response.redirect().back()
  }

  const cover = request.file('cover', {
    extnames: ['png', 'jpg'],
  })

  if (!cover.isValid) {
    // 把文件上传错误存入flash
    session.flash('coverErrors', cover.errors)
    // 保留用户之前的表单输入
    session.flashAll()
    return response.redirect().back()
  }

  // 后续正常的文件处理和数据入库逻辑
  // ...
}

第二步：在Edge视图中渲染错误信息 #

回到表单页面的Edge模板，在文件上传输入框位置，读取session里的flash错误并显示：

<form method="POST" enctype="multipart/form-data" action="/books">
  <!-- 其他表单字段示例，同时回填之前的输入 -->
  <div>
    <label for="title">书名</label>
    <input type="text" name="title" value="{{ old('title') }}" />
    @if(flash('errors') && flash('errors').title)
      <p class="text-red-500">{{ flash('errors').title[0] }}</p>
    @endif
  </div>

  <!-- 文件上传字段及错误显示 -->
  <div>
    <label for="cover">封面图片</label>
    <input type="file" name="cover" />
    @if(flash('coverErrors'))
      <div class="text-red-500">
        @each(error in flash('coverErrors'))
          <p>{{ error.message }}</p>
        @endeach
      </div>
    @endif
  </div>

  <button type="submit">提交</button>
</form>

注意事项 #

• 确保项目已启用Session中间件，AdonisJS 6默认会在start/kernel.ts的serverMiddleware数组中包含SessionMiddleware，没有的话需要手动添加。
• flashAll()方法会自动把用户之前提交的表单数据存入flash，配合视图里的old()方法可实现表单回填，提升体验。
• 文件错误的cover.errors是数组，每个元素包含message属性，用@each遍历可显示所有错误。

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