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','上傳失敗！')

        }

    }