element表单内图片上传的校验

Question

这是一开始的效果；

 handleAvatarSuccess(res, file) {
        //获取上传文件地址并且回显页面
        this.imageUrl = res.data;
        this.form.slideshowPicture = res.data;
        debugger;
        this.$refs.upImg.clearValidate();
    },
    这是文件上传成功后的函数，清楚这上面的验证，
        <el-form-item label="上传文件" :label-width="formLabelWidth" prop="imageUrl" ref="upImg">
                <el-upload class="avatar-uploader" v-model="imageUrl"  :action=GLOBAUPIMGLURLslideshow :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="GLOBALURL+imageUrl"  class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

这是我的html片段
shouldImg=(rule, value, callback)=>{

    debugger;
    if (!value) {
        return callback(new Error("请上传图片"));
    }else{
        callback();
    }
};
这是我的校验函数，为什么没有起到作用呢，当我上传过后还是会出现请上传图片的警告

Answer 1

我一般使用这样的结构 <el-form-item/><el-input/><el-upload/> ，图片上传成功后，改变 el-input 中 v-model 绑定的值，el-form-item 的校验函数中校验这个值就可以检查图片是否上传成功了。
也就是说 <el-form-item/> 校验的是其下的 <el-input/> 的值。
希望能帮到你~