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

James2017

发布于
2017-08-02

采用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}
                    ]

如何消除这个提示？

vue.js element-ui form upload

阅读 27k

11 个回答

得票最新

52admln

901310

发布于
2017-08-02

✓ 已被采纳

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

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

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

hauk0101

311

发布于
2018-09-29

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

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

星星赐福

142616

发布于
2018-10-25

我直接加了个隐藏的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>