el-upload上传图片校验不通过
先说问题
操作：在form表单中有一项上传图片功能，在填写完整，不选择上传图片后提交表单时，表单的校验会提示请上传图片，这时选择上传图片会发现校验没有消失，表单无法提交。
当前的校验方式：
imgs: [
{ required: true, message: '请上传图片', trigger: 'blur' },
],上传完成图片虽然不可以通过form表单验证，但是在参数中是可以看到是有值的。
解决方法：
- 先去网上搜索这个问题，发现挺多人都碰到过这个问题，解决的方法也是很统一，就是通过 el-form-item的“ref”属性，如下
<el-form-item label="图片" prop="imgs" ref="headimgUpload">- 然后使用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>- 下面的写法并不影响清除form表单样式，只要保证图片上传完成（如果不加入等待参数，样式还未生效，也无法清除，会有异常）on-success要不要等待我不知道，没有去尝试。
方法名 (file) {
//图片上传处理方法
// 等待照片上传成功后，清除对照片的非空校验
this.$nextTick(() => {//等待照片上传完成，
this.$refs['headimgUpload'].clearValidate()
})
},- 按照原先的操作，先不上传点击保存，提示请上传图片，选择上传图片，图片上传完成，提示语也被清除，居然这样就解决了，分享的都是好人啊！，当我再此点击保存的时候，问题出现了，form表单提交时说我依旧没有上传图片，看着图片在上面，下面提示请提交图片，哇凉哇凉。。
- 然后重新开始了百度之旅，然后就没然后了，大部分都是到上面就解决问题了 ，可是我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表单提交时依旧校验了图片不存在的话，就需要修改校验方法了，我暂时没有别的办法。写个博客记录一下，也能给和我一样问题的人提供一个思路。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
