iview表单校验文件的必填

1.问题描述

iview中使用form组件来校验各个字段的必填项，其中在校验文件时，即使文件已上传成功，依旧提示“请上传文件！”

2.重点

1. 在formValidate.file中定义一个validator的方法
2. 文件上传成功后，再次对 “文件必填项” 进行校验：this.$refs.formRef.validateField('file')
注意：任何想手动触发再次校验的字段，都可以根据 this.$refs.formRef.validateField('字段名') 进行校验

3.解决方案

1.html：

<Form
    ref='formRef'
    :model='resultForm'
    :rules='formValidate'
    :label-width='100'
>
    <FormItem
        prop='name'
        label='成果名称：'
    >
        <Input
            clearable
            placeholder='请输入成果名称'
            v-model='resultForm.name'
        />
    </FormItem>
    <FormItem
        prop='file'
        label='附件：'
    >
        <Upload
            action=''
            :before-upload='handleUpload'
            v-model='resultForm.file'
        >
            <div class='upload' >
                <p>上传pdf/rar/zip文件，不能超过50M</p>
            </div>
        </Upload>
    </FormItem>
</Form>

2.js

data () {
    return {
        // 表单
        resultForm: {
            name: '',
        },
        // 附件信息
        fileInfo: {
            name: '', // 文件名称
            file: '', // 文件内容
            errorTip: '', // 错误提示
            format: ['pdf', 'rar', 'zip'], // 可上传的文件格式
            maxSize: 1024 * 1024 * 50, // 50M （单位b）
        },
        // 表单校验
        formValidate: {
            name: { required: true, message: '请输入成果名称' },
            file: [{
                required: true,
                message: '请上传附件',
                trigger: 'change',
                validator: (rule, value, callback) => {
                    if (!this.fileInfo.file) {
                        return callback(new Error('请上传附件！'))
                    } else {
                        callback()
                    }
                },
            }],
        },
    }
},
methods:{
	// 上传附件
	handleUpload (file) {
	    if (file && file.size === 0) {
	    	// 一些文件格式的校验
	        this.fileInfo.errorTip = '文件大小不可为0'
	        return
	    } else {
	    	// 上传成功
	        this.$refs.formRef.validateField('file') // 清除表单校验：文件
	    }
	    return false // 返回 false 手动上传
	},
	// 提交表单
	submit () {
	    this.$refs.formRef.validate((valid) => {
	        if (valid) {
	            // 表单校验成功，调用接口提交内容        
	        }
	    })
	},
}