element的Upload组件增加图片必传验证

效果如下

<template>
  <div>
<!-- 头像上传开始 -->
  <el-form ref="form" :model="form" :rules="rules" :label-position="labelPosition">
    <el-form-item ref="upload" label="个人照片" prop="imageUrl">
      <el-upload
        class="avatar-uploader"
        action="#"
        :show-file-list="false"
        :http-request="uploadFile"
        :before-upload="beforeAvatarUpload"
        list-type="picture-card"
        :on-change="handleFile"
      >
        <el-image v-if="form.imageUrl" :src="form.imageUrl" class="imageSize" :fit="fit" />
        <i v-else class="el-icon-plus avatar-uploader-icon" />
        <el-button
          size="small"
          type="primary"
          style="float: right; position: absolute; bottom: 0; right: 50px"
          >上传照片</el-button
        >
        <div slot="tip" class="el-upload__tip">
          <p class="txt">
            要求说明:
            <br />照片必需是近期、正面、免冠、白底、清晰的本人证件照 ; 照片格式应为 jpg 或 jpeg
            格式,文件小于5MB。
          </p>
        </div>
      </el-upload>
    </el-form-item>
  </el-form>
  <!-- 头像上传结束 -->
  </div>
</template>

<script>
  export default {
   data(){
	  return{
	    form: {
	       imageUrl: '' // 回显的图片地址
	     },
	     rules: { imageUrl: [{ required: true, message: '请上传个人照片', trigger: 'blur' }] }
	  }
	},
    methods: {
     //判断是否已上传，已经上传清除校验提示
	 handleFile(file, fileList) {
	     if (fileList.length > 0) {
	       this.form.imageUrl = file.url //image图片回显
	       this.$refs.form.clearValidate('imageUrl') //清除图片文字校验
	     }
	   },
     submit() {
     // 图片验证
        this.$refs.upload.form.validate((uploadValid) => {
	       if (uploadValid) {
	       里面写的是图片必传后，你所需要执行的事件
	       }
        })
	  }
    }
  }
</script>

<style scoped>

</style>

转自：https://blog.csdn.net/weixin_43400431/article/details/120079901