【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' } ], } } },
相关推荐
JS_GGbond3 分钟前
前端工具链:从“厨房设备”到“开箱即用”的轻松之旅
前端
7***37453 分钟前
前端体验的隐性力量:微交互、认知负担与情绪设计的技术实践思维
前端·交互
VX:Fegn08954 分钟前
计算机毕业设计|基于springboot + vue健身房管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
eason_fan11 分钟前
一次 React 项目 lock 文件冲突修复:从 Hook 报错到 Vite 配置优化
前端·vite·前端工程化
彭于晏爱编程14 分钟前
👊👊👊领导让我从vue转到react,我敲泥*
前端
毕设源码-钟学长14 分钟前
【开题答辩全过程】以 基于Echarts的电商用户数据可视化平台设计与实现- -为例,包含答辩的问题和答案
前端·信息可视化·echarts
在黎明的反思15 分钟前
c++20协程
java·前端·c++20
百罹鸟16 分钟前
现如今的AI IDE:提示词策略与MCP Server使用感悟
前端·人工智能·mcp
徐同保17 分钟前
Electron创建demo项目和打包
前端·javascript·electron
用户120391129472617 分钟前
从原生 JS 到 Vue3 Composition API:手把手教你用现代 Vue 写一个优雅的 Todos 任务清单
前端·vue.js·面试