Element通过表单校验文件是否上传

使用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(“字段名”);

原文链接：https://blog.csdn.net/weixin_45122120/article/details/109163704