如何在React中使用Joi-browser校验图片并解决上传报错问题

• 前端校验逻辑与传值类型不匹配：你前端给image字段设置的校验规则是Joi.string()，但在React中选中上传文件后，拿到的原始值是File类型对象，不是字符串，因此在校验阶段就会直接抛出image must be string的错误。
• 后端校验逻辑与数据模型不匹配：你Mongoose数据模型中定义image字段为String类型，但Joi校验用了Joi.image()，这个扩展的校验规则默认针对文件/Buffer类型的图片，和你存字符串的需求不一致，之前Postman能通过大概率是你的测试参数刚好符合校验规则，和前端的提交场景没有对齐。

你可以根据自己的业务需求二选一即可： #

方案1：全链路传字符串（适合小图上传） #

前端把图片转成Base64字符串后再提交，和你现有代码的适配成本最低：

1. 前端新增文件转Base64逻辑，示例代码如下：

// 文件选择框的change回调
const handleImageSelect = (e) => {
  const selectedFile = e.target.files[0]
  const reader = new FileReader()
  reader.onload = () => {
    // 把转好的Base64字符串赋值给表单image字段
    setFormData(prev => ({...prev, image: reader.result}))
  }
  reader.readAsDataURL(selectedFile)
}

2. 后端修改Joi校验规则，和Mongoose模型对齐：

function validateEmployee(employee) {
  const schema = {
    // 改成校验字符串，可加正则限制Base64图片格式
    image: Joi.string().required(),   
  };
}

方案2：全链路传文件（适合大图上传） #

用FormData格式传输文件，后端接收后存到本地/对象存储，把访问地址存入数据库：

1. 前端删掉image字段的Joi.string()校验，替换为自定义规则校验文件类型、大小即可，提交时把参数包装为FormData格式：

// 提交逻辑示例
const handleSubmit = () => {
  const submitData = new FormData()
  // 把所有表单字段append到formData里
  Object.keys(formData).forEach(key => {
    submitData.append(key, formData[key])
  })
  // 请求头要带上content-type: multipart/form-data
  axios.post('/你的接口地址', submitData, {
    headers: {'Content-Type': 'multipart/form-data'}
  })
}

2. 后端接入multer等文件解析中间件，解析上传的文件后，把生成的访问字符串地址存入数据库的image字段即可，原有Joi.image()校验可以保留。

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