ElementUI中的上传文件表单验证

未上传文件

 

成功上传文件

如何实现以上效果：

1.首先el-uoload里面有很多函数钩子，on-change可以很好的反馈文件上传表示文件状态改变时的钩子，on-remove这个钩子就是当你列表移除这个文件的状态

2.el-form里面校验规则除了比较常用的validate方法外，可是还有变的方法的，这里我们使用validateField对部分表单字段进行校验的方法

代码实现：

<template>
	<el-form ref="exampleForm" :model="formModel" :rules="rules">
    	<el-form-item label="上传文件" prop="file">
        	<el-upload 
            	 class="upload-demo"
                 ref="upload"
                :action="fileUploadUrl"
                :auto-upload="false"
                :on-change="fileChange"
                :on-remove="fileRemove"
                :file-list="fileList"
                :limit="1"
                accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf">
                <el-button slot="trigger" type="primary" size="small">选择文件</el-button>
                <span slot="tip" style="margin-left: 20px">只能上传doc/docx/xls/xlsx/ppt/pptx/pdf文件</span>
    		</el-upload>
    	</el-form-item>
    </el-form>
</template>

<script>
export default {
    
    data () {
        return {
            formModel: {
                file: null
            },
            rules: {
                file: [
                    {
                        required: true,
                        message: '请至少选择一个产品标签',
                        trigger: 'change'
                    }
                ]
            },
            
        }
    },
    methods: {
        fileChange(uploadFile, fileList) {
            this.formModel.file = uploadFile
            
            if (fileList.length !== 0) {
                this.$refs.exampleForm.validateField('file')
            }
        },
        fileRemove(uploadFile, fileList) {
            if (fileList.length === 0) {
                this.formModel.file = null
                this.$refs.exampleForm.validateField('file')
            }
        }
    }
}
</script>

上面代码思路：

上传文件时，通过on-change钩子保存上传的文件，通过validateField函数对el-upload绑定的prop字段进行校验

文件列表里面的文件移除时，通过on-remove钩子如果fileList是空，设置相应的prop为空，然后同上通过validateField函函数对el-upload绑定的prop字段进行校验