vue element ui中upload组件如何在form表单中校验

Question

采用element ui，一个表单中有上传组件upload，然后写了校验规则，当不上传图片时，会提示请上传图片，当上传图片后，提示不会消失代码如下：

<el-form-item label="图标" prop="logo" required>
                    <el-upload
                        class="avatar-uploader"
                        action="http://*****/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :data = "uploadFileParams">
                        <img v-if="editParams.logo" :src="editParams.logo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                   </el-upload>
                   <div class="el-upload__tip">请上传png、jpg及jpeg格式图片(大小2M以下,建议分辨率256*256)</div>
                </el-form-item>

校验规则

logo:[
                        { required: true, message: '请上传应用图标', trigger: 'change', validator: validateNull}
                    ]

如何消除这个提示？

Answer 1

有一个方案，上传完成后，有一个钩子函数 on-success，在里面执行一个表单校验操作：

this.$refs['YOUR_REF'].validate((valid) => {
    if (valid) { 
        // 
    } else {
    
    }
});

应该有更好的方案，同求。

Answer 2

在:on-success钩子中，针对单条的校验规则，进行校验即可。

this.$refs['YOUR_REF'].validateField('YOUR_RULE');

Answer 3

我直接加了个隐藏的el-input,试过了可以

<el-form-item 
    label="图片："
    :ref="'image' + index"
    :prop="'desc.'+ index +'.image'"
    :rules="[{required:index === 0, message:'图片不能为空', trigger: 'change'}]"
      >
    <el-input v-model="item.image" style="display:none"></el-input>
    <el-upload ...>
      <img v-if="item.image" :src="item.image" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item>

Answer 4

楼主，你的uploadFileParams传的什么参数？

Answer 5

我有一个更好的办法，在上传组件外面套一层 <el-form-item ref= 'xxx'>

用xxx定位到该组件，然后调用 在on-success钩子中调用this.$refs.xxx.clearValidate(); 清除验证信息

Answer 6

我是把el-upload做了进一步的封装来解决这个这个问题的

原理：把value传到封装的组件的内部，在组件内部监控值的变化，然后调用验证函数

可以参考一下我的代码。
https://github.com/JesseZhao1...

Answer 7

请问:data = "uploadFileParams"的uploadFileParams是怎么和图片一起发送给服务器的？

Answer 8

上面说的方法不行吧，这不把其他的表单也验证了吗

Answer 9

楼主我遇到和你一样的问题 你解决了吗？

Answer 10

https://jsfiddle.net/k2om0b28/ 官方给的，不用楼主麻烦封装了

Answer 11

使用el-checkbox-group代理即可。