美文网首页
elementUI 表单校验上传(Upload),再次上传图片,

elementUI 表单校验上传(Upload),再次上传图片,

作者: 我是七月 | 来源:发表于2024-06-03 14:34 被阅读0次

    问题

    vue项目中使用elementUI,进行表单校验,未上传文件触发必填校验之后,再上传图片,必传验证提示信息未消失。

    图片

    未上传图片触发必填校验时。

    解决方法

    文件上传成功后,调用当前字段校验。

    <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="工作证明图片" prop="imgurl">
            <el-upload
                :action="url"
                :on-success="handleSuccess">
                <img v-if="form.imgurl" :src="form.imgurl">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
    </el-form>
    
    
        data() {
            return {
                form: {
                    imgurl:'', 
                },
                rules: {
                    imgurl: [{required: true,message: '请上传图片', trigger: 'change'}]
                }
            }
        },
        methods: {
           handleSuccess(res, file) {
               ....
               // 上传成功后,手动验证一次表单 imgurl为你要校验的字段
               this.$refs.form.validateField('imgurl');
           }
       }
    
    

    相关文章

      网友评论

          本文标题:elementUI 表单校验上传(Upload),再次上传图片,

          本文链接:https://www.haomeiwen.com/subject/hljeqjtx.html