Element表单如何校验文件是否上传

梦里梦外; 2022-12-16 09:07 965阅读 0赞

使用element校验上传文件的时候会出现文件已经上传成功，但是表单校验依旧未通过，如下，点击立即创建依旧提示请上传。

![20201019164820900.png][]

需要在文件上传成功的钩子函数手动添加文件并手动执行校验

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("字段名");

[20201019164820900.png]: /images/20221123/dae0f2bf196f4384ba8051f8e742279d.png