elementUI 表单校验上传(Upload),再次上传图片,
2024-06-03 本文已影响0人
我是七月
问题
vue项目中使用elementUI,进行表单校验,未上传文件触发必填校验之后,再上传图片,必传验证提示信息未消失。
图片
未上传图片触发必填校验时。
解决方法
文件上传成功后,调用当前字段校验。
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="工作证明图片" prop="imgurl">
<el-upload
:action="url"
:on-success="handleSuccess">
<img v-if="form.imgurl" :src="form.imgurl">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
data() {
return {
form: {
imgurl:'',
},
rules: {
imgurl: [{required: true,message: '请上传图片', trigger: 'change'}]
}
}
},
methods: {
handleSuccess(res, file) {
....
// 上传成功后,手动验证一次表单 imgurl为你要校验的字段
this.$refs.form.validateField('imgurl');
}
}