el-form关于上传图片校验功能解决方法浅谈（非常简单）

相对于输入框和选择框校验而言，图片上传校验有些不大好用，网上找了一些解决方法也是比较复杂。

解决思路：

1.在需要校验的原有属性中增加一个图片是否存在的标识

2.在上传图片所属el-form-item中添加一个v-show=false的输入框，该输入框绑定的值便是图片标识

3.对于图片的校验字段更改为对输入框标识的校验：如存在为"1"，不存在为""

4.（重点）更改标识的方法不能用直接赋值，要用this.$set，图片上传成功即为"1"，图片删除要判断是否还有其余图片

上例子：

<el-form
 :rules="rules"
 :model="formCon"
 ref="formCon1"
>
    <el-form-item ref="commodityImage" prop="imageBs" label="商品图片：">
        <el-input v-show="false" v-model="formCon.imageBs" show-word-limit type="text">
                </el-input>
    </el-form-item>
</el-form>

data() {
      formCon: { imageBs:''},
      rules: {
          imageBs: [ 
              { required: true, message: '请选择商品图片', trigger: 'change'}
          ],
      },
}

上传图片成功的方法:on-success中增加

this.$set(this.formCon,'imageBs',"1");

图片删除的方法中增加

if(this.commodityImage.length > 0){ // commodityImage存放图片的数组
        this.$set(this.formCon,'imageBs',"1");
      } else{
        this.$set(this.formCon,'imageBs',"");
      }