H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue element ui中upload组件如何在form表单中校验

采用element ui,一个表单中有上传组件upload,然后写了校验规则,当不上传图片时,会提示请上传图片,当上传图片后,提示不会消失代码如下:

<el-form-item label="图标" prop="logo" required>
                    <el-upload
                        class="avatar-uploader"
                        action="http://*****/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :data = "uploadFileParams">
                        <img v-if="editParams.logo" :src="editParams.logo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                   </el-upload>
                   <div class="el-upload__tip">请上传png、jpg及jpeg格式图片(大小2M以下,建议分辨率256*256)</div>
                </el-form-item>

校验规则

logo:[
                        { required: true, message: '请上传应用图标', trigger: 'change', validator: validateNull}
                    ]

clipboard.png

如何消除这个提示?

回答:

有一个方案,上传完成后,有一个钩子函数 on-success,在里面执行一个表单校验操作:

this.$refs['YOUR_REF'].validate((valid) => {
    if (valid) { 
        // 
    } else {
    
    }
});

应该有更好的方案,同求。

回答:

在:on-success钩子中,针对单条的校验规则,进行校验即可。

this.$refs['YOUR_REF'].validateField('YOUR_RULE');

回答:

我直接加了个隐藏的el-input,试过了可以

<el-form-item 
    label="图片:"
    :ref="'image' + index"
    :prop="'desc.'+ index +'.image'"
    :rules="[{required:index === 0, message:'图片不能为空', trigger: 'change'}]"
      >
    <el-input v-model="item.image" style="display:none"></el-input>
    <el-upload ...>
      <img v-if="item.image" :src="item.image" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item>

回答:

楼主,你的uploadFileParams传的什么参数?

回答:

我有一个更好的办法,在上传组件外面套一层 <el-form-item ref= ‘xxx’>

用xxx定位到该组件,然后调用 在on-success钩子中调用this.$refs.xxx.clearValidate(); 清除验证信息

回答:

我是把el-upload做了进一步的封装来解决这个这个问题的

原理:把value传到封装的组件的内部,在组件内部监控值的变化,然后调用验证函数

可以参考一下我的代码。
https://github.com/JesseZhao1…

回答:

请问:data = “uploadFileParams”的uploadFileParams是怎么和图片一起发送给服务器的?

回答:

上面说的方法不行吧,这不把其他的表单也验证了吗

回答:

楼主我遇到和你一样的问题 你解决了吗?

回答:

https://jsfiddle.net/k2om0b28/ 官方给的,不用楼主麻烦封装了

回答:

使用el-checkbox-group代理即可。image.png

本文地址:H5W3 » vue element ui中upload组件如何在form表单中校验

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址