element-ui 表单验证是否选择了图片

我的需求是在图片上传到服务器之后再判断是否选择图片，不是选中图片就判断，所以我是在图片上传成功后进行逻辑处理

效果图

 

 

 

html部分

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" size='mini' label-width="100px" class="demo-ruleForm">
       <el-form-item label="转盘图片" class="box-integral" prop='imageUrl'>
            <el-upload
                class="avatar-uploader"
                :action="URL+'/api/post/file'" //服务器地址
                :data="date"   //需要带的参数
                :show-file-list="false"
                :on-success="showImageSuccess"  //将用到此函数
                :on-error="imageUrlerror"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <label style="position: relative;left: 6px;">（建议大小320*320px）</label>
        </el-form-item>
</el-form>

data部分

data(){
　　return{
　　　　date:{
　　　　　　token:''

      },
　　　　ruleForm"{
　　　　　　imageUrl:''
      },
　　　　rules:{
　　　　　　imageUrl:[{required:true,message:'请选择转盘图片',trigger:'change'}]　　
      }
   }
}

js部分

//上传到服务器之后验证

showImageSuccess(res,file){

        if(res.errorCode == 200){

　　　　　　//会验证整个表单
　　　　　　// this.$refs.ruleForm.validate(valid => {})
　　　　　　1.　this.ruleForm.imgageUrl = res.result  // 返回的图片地址赋值到ruleForm.imgageUrl里面（第一步和第二部顺序不能反）

            //验证指定表单

            2.   this.$refs.ruleForm.validateField('imageUrl') //重中之重

            loot.Messages(this,'success','上传成功！')

        }else{

            loot.Messages(this,'error','上传失败！')

        }

    }