1.问题描述
iview中使用form组件来校验各个字段的必填项，其中在校验文件时，即使文件已上传成功，依旧提示“请上传文件！”
2.重点
- 在
formValidate.file中定义一个validator的方法 - 文件上传成功后，清除对文件必填项的校验：
this.$refs.formRef.validateField('file')
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) {
// 表单校验成功，调用接口提交内容
}
})
},
}
