Element-ui中为上传组件添加表单校验

vue所依赖的Element的UI库在使用其中的upload组件时，可能很大几率会遇到这个题，需要给upload组件添加表单校验

大家这里直接看代码就可以

          <el-form-item class="baseinfo-headimg" ref="headimgUpload" label="上传首图：" prop="headImg">
            <el-upload style="display:inline-block;margin-left:5px;"
              class="upload-headImg"
              list-type="picture-card"
              :on-success="handleHeadImgSuccess"
              :before-upload='handleHeadImgBefore'
              ref="headImgElement"
              accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
              :action="imageUploadUrl">
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="baseInfo.headImg">
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleHeadImgRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
              <i class="el-icon-plus"></i>
            </el-upload>
            <p class="upload-tip"><span>*</span>图片尺寸300px*300px,不超过60KB</p>
            <el-dialog :visible.sync="dialogUploadIsShow">
              <img width="100%" :src="baseInfo.headImg">
            </el-dialog>
          </el-form-item>

　　js：

 baseInfoRules: {
        headImg: [
          {
            required: true, message: '请上传首图', trigger: 'change'
          }
        ]
      }, // 表单正则
methods: {
       // 首图上传成功
    handleHeadImgSuccess(res) {
     // xxx的其他操作
      this.$refs.headimgUpload.clearValidate(); // 关闭校验
    },  
}

　　主要的解决思路为：为upload组件外层的el-form-item添加ref。然后在upload组件上传文件成功后，通过this.$refs.element(元素).clearValidate();方法该组件的正则校验。

在开发中所做的总结，文章格式较为简陋，望见谅。