【Vue】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="https://segmentfault.com/q/1010000010466409/editParams.logo" :src="https://segmentfault.com/q/1010000010466409/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}
]

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

如何消除这个提示？

回答

有一个方案，上传完成后，有一个钩子函数 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="https://segmentfault.com/q/1010000010466409/item.image" style="display:none"></el-input>
    <el-upload ...>
      <img v-if="https://segmentfault.com/q/1010000010466409/item.image" :src="https://segmentfault.com/q/1010000010466409/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代理即可。【Vue】vue element ui中upload组件如何在form表单中校验

以上是 【Vue】vue element ui中upload组件如何在form表单中校验 的全部内容， 来源链接： utcz.com/a/74063.html

回到顶部