Element ui form表单上传图片以及图片回显后提交表单validate校验失败

Elementui 表单上传图片以及图片回显后提交表单validate校验失败问题

1.页面加载时，由于接口响应参数赋值给初始化form表单的值时，造成初始化的imageCode值丢失。
下面展示一些 内联代码片。

// A code block
<el-form
      ref="form"
      :model="form"
      :rules="rulseFirst"
      :validate-on-rule-change="false"
      label-width="150px"
      class="form"
    >
    <el-form-item prop="name" label="名称"><el-input
          v-model.trim="form.name"
          maxlength="64"
          show-word-limit
          placeholder="请输入名称"
        ></el-input></el-form-item>
        <el-form-item prop="code" label="编码"><el-input
          v-model.trim="form.code"
          maxlength="32"
          show-word-limit
          placeholder="请输入编码"
        ></el-input></el-form-item>
         <el-form-item prop="imageCode" label="上传图片">
            <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
       </el-upload>
       <el-input
          v-model.trim="form.imageCode"
          v-if="false"
        ></el-input>
        </el-form-item>
        <el-form-item><el-button @click="onsubmit"></el-button></el-form-item>
</el-form>

// An highlighted block
data:{
return:{
form:{name:'',code:'',imageCode:''},
rulseFirst:{
name:[{ required: true, message: "请输入名称", trigger: "blur" }],
imageCode:[ { required: true, message: "请上传图片", trigger: "change" },]
}
},
mounted(){this.getInfo()},
methods:{

getInfo(){
   //请求接口数据
   axios.get("XXXX",{params:{xxx:''}}).then(res=>{
   let {data}=res;
   
   this.form=Object.assgin(this.form,data);
   })
   
},
onsubmit(){
this.$refs.form.validate(valid=>{
   
	if(valid){
	//接口调用
    }
})
},
beforeAvatarUpload(){},
handleAvatarSuccess(response, file, fileList){
if (200 == response.code) {
   let data = JSON.parse(response.data);
        let url = data.url;
        let materialCode = data.materialCode ;
        this.form.imageCode=materialCode;
  }
},
}
}

第一种情况 form表单赋值不正确

1.接口请求数据后直接赋值，导致imageCode属性丢失

说明

1.不能直接采用this.form=data;给form赋值，返回接口中没有imageCode时，相当于给form初始化了一遍
应直接Object.assgin(this.form,data)
2.Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象但是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身
注意：当object只有一层的时候，是深拷贝

验证

1.valid验证通过时会返回false，是由于form表单赋值引起
2.正确赋值后valid返回true

第二种情况 上传图片后没有对form对应的imageCode进行赋值处理

handleAvatarSuccess(response, file, fileList){
if (200 == response.code) {
let data = JSON.parse(response.data);
let url = data.url;
let materialCode = data.materialCode ;
this.form.imageCode=materialCode;
}
},

第三种情况 由于el-form-item 的prop属性值不是imageCode或者v-model的值没有绑定添加el-input进行数据

添加一个input即可  
   <el-input
      v-model.trim="form.imageCode"
      v-if="false"
    ></el-input>