我们在有些时候上传文件时需要一些非空校验,当然校验文件参数类型等等可以采用before-upload或者on-change、on-success一些方法检验,
原生的input type=“file” 采用监听change 进行基础校验
首先触发创建按钮,弹出提示
点击上传文件,但是提示依旧还在
我们这边 可以看到文件已经上传了,但是提示信息还是会存在,解决方案采用再次手动触发单个文件校验。
//最终解决方案,及相应方法
// 表单组件中嵌入upload组件
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="上传头像" prop="file">
<el-upload
:action="/api/file"
:on-success="handleAvatarSuccess">
</el-upload>
</el-form-item>
</el-form>
// 验证方法
export default {
data() {
return {
form: {
file:'',
},
rules: {
file: [{required: true,message: '请上传', trigger: 'change'}]
}
}
},
methods: {
handleAvatarSuccess(res, file) {
this.form.imgurl = res.data.filepath;
// 上传成功后,手动验证一次表单
this.$refs.form.validateField('file');
}
}
}
采用改变的时候单独去触发某一个表单的验证,非空的问题就解决了!