React前端提交内容报celebrate request validation failed错误如何解决

• 核心原因是后端使用celebrate（基于Joi的校验中间件）配置的请求体校验规则中，没有声明允许接收file字段，Joi默认会拒绝所有未在规则中定义的额外字段，因此只要请求携带file参数就会触发校验失败。
• 次要原因：前端提交逻辑中无论用户是否选择了媒体文件，都会固定往FormData中追加file字段，所以哪怕只提交纯文本也会触发校验报错。

第一步：修改后端校验规则 #

在celebrate的BODY校验配置中新增可选的file字段，适配单文件上传的场景：

router.post(
  '/',
  ensureAuthorization('user'),
  ensureFiles('file', false),
  resize,
  celebrate({
    [Segments.BODY]: {
      text: Joi.string().required(),
      // 新增file字段定义，设为可选，允许空值
      file: Joi.any().optional(),
    },
  }),
  storiesController.create,
);

如果需要更严格的媒体文件类型校验，也可以替换为针对性规则：

file: Joi.object({
  mimetype: Joi.string().valid('image/jpeg', 'image/png', 'video/mp4').optional()
}).unknown(true).optional()

第二步：优化前端提交逻辑（可选但推荐） #

仅当用户选中了有效媒体文件时，才往FormData中追加file字段，避免传递无效的空值字段：

const formData = new FormData();
formData.append('text', data.text);
// 新增判断，只有fileImage存在时才追加字段
if (fileImage) {
  formData.append('file', fileImage);
}

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