ElementUI中el-from验证el-upload上传的文件

1 问题描述

• 现状

在表单中有一项上传文件的功能，在未选择文件之前，对表单进行校验，提示文件未上传，需上传文件；选择文件但未上传，对表单进行校验，依旧提示文件未上传，需上传文件。

未上传文件之前的校验结果

上传文件之后的校验结果

• 期望

在未选择文件之前，对表单进行校验，提示文件未上传，需上传文件；选择文件但未上传，对表单进行校验，应该通过校验。

2 解决思路

2.1 被忽略的但对解决该问题很有用的ElementUI功能

1. el-upload组件有多个函数钩子来反馈文件上传/删除的状态，其中：on-change表示文件状态改变时的钩子，on-remove表示文件列表移除文件时的钩子。

2. el-form组件校验规则除了validate方法外，还有一个方法validateField，用于对部分表单字段进行校验的方法

2.2 解决方法

1. 上传文件时，在el-upload的on-change钩子函数中，保存上传的文件，并调用el-form的validateField函数对el-upload绑定的prop字段进行校验
2. 文件列表移除文件时，在el-upload的on-remove钩子函数中，如果fileList为空，设置相应的prop的值为空，并调用el-form的validateField函数对el-upload绑定的prop`字段进行校验

3 代码实现

<template>
	<el-form ref="exampleForm" :model="formModel" :rules="rules">
    	<el-form-item label="上传文件" prop="file">
        	<el-upload 
            	ref="fileUpload"
                :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 {
    name: 'ExampleForm',
    data () {
        return {
            formModel: {
                file: null
            },
            rules: {
                file: [
                    {
                        required: true,
                        message: '请至少选择一个产品标签',
                        trigger: 'change'
                    }
                ]
            },
            fileUploadUrl: "文件上传的URL地址"
        }
    },
    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>