【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' } ], } } },
相关推荐
婷婷婷婷8 分钟前
表格组件封装详解(含完整代码)
前端
晴虹9 分钟前
lecen:一个更好的开源可视化系统搭建项目--页面设计器(表单设计器)--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
前端·后端·低代码
小皮虾14 分钟前
这应该是前端转后端最简单的办法了,不买服务器、不配 Nginx,也能写服务端接口,腾讯云云函数全栈实践
前端·javascript·全栈
码途进化论14 分钟前
Vue3 防重复点击指令 - clickOnce
前端·javascript·vue.js
小二·19 分钟前
从零手写俄罗斯方块(Tetris)——前端工程化实战与性能优化
前端·性能优化
xiaoxue..31 分钟前
高频事件的“冷静剂” 闭包的实用场景:防抖与节流
前端·javascript·面试·html·编程思想
优弧1 小时前
2025 提效别再卷了:当我把 AI 当“团队”,工作真的顺了
前端
.try-1 小时前
cssTab卡片式
java·前端·javascript
怕浪猫1 小时前
2026最新React技术栈梳理,全栈必备
前端·javascript·面试
ulias2121 小时前
多态理论与实践
java·开发语言·前端·c++·算法