element表单校验问题 表单清除某个校验 表单图片校验问题

问题描述

首先我使用的是vue-cli ＋element Ui ,就是在表单中有上传图片环节，由于我们这边是先上传图片，提交表单的时候单独传imageUrl即可，官方表格演示中并没有表单校验图片流程，然后按照表单校验一般规则填写，无论是否上传图片，都有提示：图片不能为空，但是如果上传了图片，虽然有提示，但是也能提交成功，但是，这样对用户太不友好。

如何修改

下面是我的form表单中截取了图片上传一小部分，如果是在新增图片时不显示点击更换，如果是修改则显示更换；不需要的请忽略；
实现的原理： 主要是通过成功上传图片后单独清除image校验即可；

//html 部分
<el-form-item label="图片地址" prop="imageUrl">
          <el-upload
            class="avatar-uploader"
            :action="upLoadUrl"
            drag
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
            <div v-else>
              <i class="el-icon-upload avatar-uploader-icon"></i>
              <p style="padding-top: 0;margin-top: 0;line-height: 16px">将文件拖到此处，或点击上传图片</p>
            </div>
          </el-upload>
          <el-upload
            v-show="editForm"
            class="upload-demo"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            :action="upLoadUrl">
            <el-button size="small" type="primary">点击更换</el-button>
          </el-upload>
        </el-form-item>

//js部分
data(){
	let checkImage = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('图片不能为空'));
      }else{
        callback()
      }
    };
    return{
	// 表单校验
      rules: {       
        imageUrl: [
          { validator: checkImage,required: true }
        ],
      },
   }
}

handleAvatarSuccess(res, file) {
      this.form.imageUrl = URL.createObjectURL(file.raw);
      this.formUpLoadImgUrl = res.absoluteUrl;
      let formField = this.$refs["form"].fields;
      formField.map(i => {
        if(i.prop === 'imageUrl'){  //通过prop属性值相同来判断是哪个输入框，比如：要移除prop为'imageUrl'
          i.clearValidate();
          return false
        }
      })
    },

此种方法目前解决了我的需求，如果各位大佬另有高见，欢迎指导