我们在有些时候上传文件时需要一些非空校验,当然校验文件参数类型等等可以采用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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐