antd-vue/elementUi上传图片文件校验是否为空，解决不能直接使用 form-item validFeild校验、校验失败问题

先看实现效果：

 

 当我们使用ui框架校验上传图片或者文件时，代码一般会这么写：

<a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
>
    <a-form-model-item
        label="图片"
        prop="advertUrl"
        help="支持JPEG、PNG文件；上传尺寸为690*270px；大小不得超过4MB。"
    >
        <image-upload :value="form.advertUrl"/> //这是我二次封装的ui上传组件，如果直接使用ui框架的上传组件也可以
    </a-form-model-item>
</a-form-model>

value值或者文件值写成了form.xxx，这是正常的input的校验流程，当是上传文件的input时会发现校验失效了，上传了文件提示还在，如下所示：

 这是因为嵌套了组件或者嵌套了值，导致这个value值validFeild获取不到，视图没有更新，解决办法如下：

<a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
>
    <a-form-model-item
        label="图片"
        prop="advertUrl"
        help="支持JPEG、PNG文件；上传尺寸为690*270px；大小不得超过4MB。"
    >
        <image-upload :value="advertUrl" @change="uploadChange"/> //不要使用form包含，直接在data声明
    </a-form-model-item>
</a-form-model>

不要使用form对象包裹，直接在data声明，并且加一个获取文件的回调函数，使用$set赋值给form的校验文件值。

uploadChange(data) {
    this.$set(this.form, 'advertUrl', data[0])
},

这样就大功告成了，等于是上传组件的值和校验的值独立互不干扰，校验就正常了。