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();方法該組件的正則校驗。

在開發中所作的總結，文章格式較爲簡陋，望見諒。