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文章来源：https://www.toymoban.com/news/detail-741532.html
第二种情况 上传图片后没有对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;
}
},文章来源地址https://www.toymoban.com/news/detail-741532.html
第三种情况 由于el-form-item 的prop属性值不是imageCode或者v-model的值没有绑定添加el-input进行数据
添加一个input即可
<el-input
v-model.trim="form.imageCode"
v-if="false"
></el-input>
到了这里，关于Element ui form表单上传图片以及图片回显后提交表单validate校验失败的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
