在项目中，经常遇到表单有上传图片、文件的情况，但是这些不经过v-model控制。所以对于表单校验就不能直接通过element自带的校验处理。这里就有个问题，我又要校验其他表单内容，又要特殊处理不是表单元素的内容校验。尝试过 clearValidate 但是处理起来还是有点问题。后来发现 Form-Item 一个属性 error,可以在你需要校验的时候添加校验提示，不需要的时候清空，就可以满足我的业务需求

例：校验上传图片为必填项

image.png

<el-form ref="ruleForm" size="mini" :rules="rules" :model="form" label-width="170px">
 <!--  ....一些表单元素 -->
<el-form-item ref="ruleImg" label="车型图片：" required :error="carImgError">
  <el-upload
        ref="imgUpload"
        :action="uploadUrl"
        accept="image/*"
        list-type="picture"
        :before-upload="handleBefore"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :file-list="fileList"
      >
        <el-button icon="iconfont icon-upload">图片上传</el-button>
        <span slot="tip" class="el-upload__tip ml">请上传jpg/png格式的图片</span>
      </el-upload>
 </el-form-item>
</el-form>

<script>
export default {
  data() {
    return {
      uploadUrl: window.global_config.uploadURL,
      carImgError: '', // 关键 表单内上传组件校验提示
      rules: {
        // 一些表单校验
      },
      fileList: [{ name: '默认车型图片', url: 'https://upload-images.jianshu.io/upload_images/18912919-2dd7184b2309af4f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'}],
      form: {}
  },
  methods: {
    getForm() {
      this.form.address = this.fileList[0] && this.fileList[0].url || ''
      if (!this.form.address) this.carImgError = '请上传车型图片'   // 关键
      this.$refs.ruleForm.validate().then(() => {
        if (this.form.address) {
         // 表单上传接口
        } else {
          return false
        }
      })
    },
    // 图片移除
    handleRemove(file, fileList) {
      this.fileList = []
    },
    handleBefore(file) {
      const isJPG = (file.type === 'image/png' || file.type === 'image/jpeg')
      if (!isJPG) {
        this.$message.error('请上传jpg/png格式的图片')
      }
      return isJPG
    },
    // 图片上传成功
    handleSuccess(response, file, fileList) {
      this.$message.success('图片上传成功')
      // 关键 清空提示
      this.carImgError = ''
     //此处我只上传一张图片 再次上传更换原来的图片
      this.fileList = [{ name: file.name, url: response.data }]
    }
  }
}
</script>

总结：1、 在表单提交时，同时进行表单校验（rules内定义的校验）、上传组件是否有文件（判断是否有图片地址）。表单校验成功后校验值是否存在，如果存在进行提交，不存在不做处理。（表单校验和上传组件需要同时校验，防止只提示一个校验错误信息，所以在表单校验成功后还需判断图片值是否存在，或者判断carImgError是否为空）
2、在图片上传成功后，需要清空校验错误信息，（最好在图片移除的时候加上错误信息this.carImgError = '请上传车型图片',但是我懒）

结束