element表单，上传组件，第一次校验提示必须，然后上传成功之后，点击提交依旧提示未上传

  • Z时代
  • 2024-03-13
  • 分类：IT

element表单，上传组件，第一次校验提示必须，然后上传成功之后，点击提交依旧提示未上传

上传组件
（具体的代码就不写了，但我是用 el-form-item 包了一层的`

<el-form-item label="上传照片" prop="avatar">
  <el-upload
    :on-success="onSuccess"
  />
</el-form-item>

上传组件的成功回调中给 avatar 赋值方便表单的校验

onSuccess(data) {
      // 上传成功回调函数，设置表单项avatar的值
      console.log('图片上传成功')
      this.$refs['form'].formData.avatar = data
      console.log(this.$refs['form'].formData)
    },

而且如果在校验前第一次就上传了图片，则点击提交能顺利校验

奇怪的是，如果第一次未上传图片，点击提交触发了校验提示之后，再上传图片，成功后始终无法通过校验

问题是明明上面代码里输出的formData已经包含avatar了，校验消息依旧提示缺少avatar

回答：

this.$refs['form'].formData.avatar = data
改成$set的方式试试

回答：

看看你的rules怎么定义的，默认校验类型是string，自定义校验规则试试，看看里面的value是不是有值就可以确定了

以上是 element表单，上传组件，第一次校验提示必须，然后上传成功之后，点击提交依旧提示未上传 的全部内容， 来源链接： utcz.com/p/935755.html

回到顶部