使用elementUI上传组件上传图片后,表单验证还是提示不存在
主要是因为组件包的层级比较深,验证取不到值导致
可以通过绑定其他元素获取到值进行验证
比如增加el-checkbox-group元素,将值绑定到它上面
javascript
<el-form :model="Form" ref="form" :rules="rules">
<el-form-item prop='imageUrl'>
<el-checkbox-group v-model="form.imageUrl" v-show="false"></el-checkbox-group>
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:http-request="handleAvatarSuccess">
<img v-if="Form.imageUrl" :src="Form.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
export default { data() { return { Form: { imageUrl: '' }, rules: { imageUrl: [ { required: true, message: '请上传图片', trigger: 'change' } ], } } },