【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' } ], } } },
相关推荐
codingWhat17 分钟前
介绍一个手势识别库——AlloyFinger
前端·javascript·vue.js
代码老中医24 分钟前
2026年CSS彻底疯了:这6个新特性让我删掉了三分之一JS代码
前端
不会敲代码125 分钟前
Zustand:轻量级状态管理,从入门到实践
前端·typescript
踩着两条虫25 分钟前
VTJ.PRO 双向代码转换原理揭秘
前端·vue.js·人工智能
扉川川26 分钟前
OpenClaw 架构解析:一个生产级 AI Agent 是如何设计的
前端·人工智能
远山枫谷28 分钟前
一文理清页面/组件通信与 Store 全局状态管理
前端·微信小程序
codingWhat28 分钟前
手撸一个「能打」的 React Table 组件
前端·javascript·react.js
HelloReader29 分钟前
Tauri 应用安全从开发到发布的威胁防御指南
前端
bluceli30 分钟前
WebAssembly实战指南:将高性能计算带入浏览器
前端·webassembly
yuki_uix30 分钟前
Object.entries:优雅处理 Object 的瑞士军刀
前端·javascript