element upload上传文件非空校验问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
我们在有些时候上传文件时需要一些非空校验,当然校验文件参数类型等等可以采用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');
}
}
}
采用改变的时候单独去触发某一个表单的验证,非空的问题就解决了!
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)