ElementUI中el-form验证el-upload上传图片校验不通过

el-upload上传图片校验不通过

先说问题

操作：在form表单中有一项上传图片功能，在填写完整，不选择上传图片后提交表单时，表单的校验会提示请上传图片，这时选择上传图片会发现校验没有消失，表单无法提交。

当前的校验方式：

 imgs: [
        { required: true, message: '请上传图片', trigger: 'blur' },
        ],

上传完成图片虽然不可以通过form表单验证，但是在参数中是可以看到是有值的。

解决方法：

1. 先去网上搜索这个问题，发现挺多人都碰到过这个问题，解决的方法也是很统一，就是通过 el-form-item的“ref”属性，如下

<el-form-item label="图片" prop="imgs" ref="headimgUpload">

2. 然后使用el-upload的 ：on-success:“headimgUpload” 成功触发的方法清除掉form表单的校验,不过我这里用的是on-change : ‘方法名’，把清除样式写在了方法的最后执行。

<el-upload
            class="upload-demo"
            drag
            accept=".jpg, .jpeg, .png"
            action=""
            :on-change="方法名"
            :auto-upload="false"
            :show-file-list="false">
             </el-upload>

3. 下面的写法并不影响清除form表单样式，只要保证图片上传完成（如果不加入等待参数，样式还未生效，也无法清除，会有异常）on-success要不要等待我不知道，没有去尝试。

 方法名 (file) {
      //图片上传处理方法
      // 等待照片上传成功后，清除对照片的非空校验
      this.$nextTick(() => {//等待照片上传完成，
        this.$refs['headimgUpload'].clearValidate()
      })
    },

4. 按照原先的操作，先不上传点击保存，提示请上传图片，选择上传图片，图片上传完成，提示语也被清除，居然这样就解决了，分享的都是好人啊！，当我再此点击保存的时候，问题出现了，form表单提交时说我依旧没有上传图片，看着图片在上面，下面提示请提交图片，哇凉哇凉。。
5. 然后重新开始了百度之旅，然后就没然后了，大部分都是到上面就解决问题了 ，可是我form提交还有一次校验，不知道他们为什么没有遇到，只能自己来了

原有的校验肯定不能用了，换成validator试试，

validator验证器，可以对格式进行复杂限制，
跟rule一样需要设置对应表单项的prop属性，然后绑定validator，validator绑定验证规则变量（注意验证规则变量是处在data的return外面）

 imgs: [
       // { required: true, message: '请上传应用封面', trigger: 'blur' },
          { validator: (rule, value, callback) => { validator方法名()(rule, value, callback) }, message: '请上传图片', trigger: 'blur' }
        ],
        //方法就放在这里展示了 //这个方法要在data里 renturn 外面
   data () {
    let validator方法名= function () {
      return (rule, value, callback) => {
        if (!value) {
          return callback(new Error(rule.message))
        }
         //判断参数是否有长度，有长度表示不为空，我是把图片转成的字节
        const valid = value.length > 0
        if (valid) {
          return callback()
        } else {
          return callback(new Error(rule.message))
        }
      }
    }
  }
  return {
  }

弄完之后，继续测试是否可以正常提交，发现还是不行，（由于我把清除图片校验的那一段注释了），纠结了一小会，又把清除上传图片校验的方法放开，继续操作，正常提交成功了。

总结:清除校验还是要有，但是form表单提交时依旧校验了图片不存在的话，就需要修改校验方法了，我暂时没有别的办法。写个博客记录一下，也能给和我一样问题的人提供一个思路。