【VUE】使用elementUI上传组件-提示不存在

使用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' } ], } } },
相关推荐
Senar1 分钟前
如何判断浏览器是否开启硬件加速
前端·javascript·数据可视化
HtwHUAT25 分钟前
实验四 Java图形界面与事件处理
开发语言·前端·python
利刃之灵26 分钟前
01-初识前端
前端
codingandsleeping31 分钟前
一个简易版无缝轮播图的实现思路
前端·javascript·css
天天扭码34 分钟前
一分钟解决 | 高频面试算法题——最大子数组之和
前端·算法·面试
全宝1 小时前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
拉不动的猪2 小时前
简单回顾下插槽透传
前端·javascript·面试
烛阴2 小时前
Fragment Shader--一行代码让屏幕瞬间变黄
前端·webgl
爱吃鱼的锅包肉2 小时前
Flutter路由模块化管理方案
前端·javascript·flutter
风清扬雨2 小时前
Vue3具名插槽用法全解——从零到一的详细指南
前端·javascript·vue.js