使用element校验上传文件的时候会出现文件已经上传成功,但是表单校验依旧未通过,如下,点击立即创建依旧提示请上传。
需要在文件上传成功的钩子函数手动添加文件并手动执行校验
html如下:
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="文件" prop="fileList">
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
:on-success="upSuccess" :file-list="ruleForm.fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
js代码如下:
new Vue({
el: '#page',
data: function () {
return {
ruleForm: {
fileList: []
},
rules: {
fileList: [{
message: '请上传',
trigger: 'change',
required: true
}],
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
// 上传成功钩子函数
upSuccess(response, file, fileList) {
this.ruleForm.fileList.push(file)
this.$refs.ruleForm.validateField('fileList')
}
}
})
在上传成功的钩子函数需要做两个操作:
1、手动添加上传文件的对象到绑定的数组之中。
2、手动执行表单指定字段的校验
触发对整个表单的验证:this.$refs.ruleForm.validate();
触发对表单部分字段的验证:this.$refs.ruleForm.validateField("字段名");