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

这篇具有很好参考价值的文章主要介绍了【VUE】使用elementUI上传组件-提示不存在。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用elementUI上传组件上传图片后,表单验证还是提示不存在

主要是因为组件包的层级比较深,验证取不到值导致

可以通过绑定其他元素获取到值进行验证

比如增加el-checkbox-group元素,将值绑定到它上面文章来源地址https://www.toymoban.com/news/detail-617475.html

<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' } ], } } },

到了这里,关于【VUE】使用elementUI上传组件-提示不存在的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【VUE】使用elementUI tree组件根据所选id自动回显

     需求如下: 1.点击父级节点 将父级节点下children中所有id放入数组 2.点击父级下的子节点 将点击的子节点放入数组 3.取消选择父节点,将放入数组的所有子节点id删除 4.根据选择的子节点数组,匹配他所属的父节点

    2024年02月15日
    浏览(38)
  • vue+elementui上传视频并回显

    之前上传视频我做的东西的话是没有办法看到视频的内容的,然后我们组长就说这个业务是不可以的,因为用户的话过了很久是会忘记自己这个视频是什么内容的,所以我们做一个上传视频的功能的话,是一定要一个回显,让用户可以看得到视频的内容。 那么我们可以用vi

    2024年02月15日
    浏览(35)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(51)
  • O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?

    本文主要介绍如何在O2OA中进行审批流程表单或者工作流表单设计,O2OA主要采用拖拽可视化开发的方式完成流程表单的设计和配置,不需要过多的代码编写,业务人员可以直接进行修改操作。 在流程表单设计界面,可以在左边的工具栏找到ElementUI组件。 将对应的组件拖动到表

    2024年03月09日
    浏览(35)
  • Bug:elementUI样式不起作用、Vue引入组件报错not found等(Vue+ElementUI问题汇总)

    1. Vue引用Element-UI时,组件无效果解决方案 前提: 已经安装好elementUI依赖 如果此时发现element的组件依然没起效果,原因:未引入css样式文件 当前效果: 预期效果: 解决办法:在main.js中引入css文件 2. Vue引入components报错:export xxx not found 在pages文件夹的Register.vue页面中引入

    2024年02月07日
    浏览(40)
  • vue制作自己的组件库(仿ElementUI)

    1.首先自己创建个新的vue项目,之后更改下目录形式,将src文件更改为examples,这里是专门放组件展示的md文件,packages文件里是放自己写的组件代码 2.然后是开始配置vue.config.js文件 ,其中md-loader是读取md文件的相关配置      3.配置好了之后,就可以开始写组件了,这里就举

    2024年02月08日
    浏览(38)
  • vue2 ElementUI 表单标签、表格表头添加问号图标提示

    使用element-ui有时候需要对表格的 表头 、表单的 标签 进行自定义,添加问号的悬浮提示。 要达到的效果,如图所示: https://element.eleme.cn/#/zh-CN/component/tooltip 定义问号图标,图标上方显示tooltip提示内容 代码: 实现效果: 为什么不写content属性和里面的提示内容也能显示?

    2024年01月25日
    浏览(48)
  • springboot + vue + elementui — upload解决跨域、实现图片上传

    今日记录通过elementui上传时得到的问题。 我们在本地部署的服务,前端服务请求后端接口,存在跨域问题, 跨域问题确实是由 Web浏览器的同源策略 引起的。同源策略是浏览器的一项安全机制,它限制了从一个源加载的文档或脚本如何与来自其他源的资源进行交互。 同源策略要

    2024年02月10日
    浏览(42)
  • ssm551基于vue框架和elementui组件的手机官网+vue

    题目:手机官网 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本手机官网就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息,使用这种软件工具可

    2024年01月24日
    浏览(36)
  • Vue+ElementUI+Axios实现携带参数的文件上传(数据校验+进度条)

    可以实现对上传文件的类型,大小进行数据校验,以及对上传文件所要携带的数据也进行的校验,也有文件上传进度的进度条。 一、Vue 结构部分 弹窗显示(文件上传框+文本框+单选按钮) 二、JS部分 1、数据和数据校验部分 2、方法部分 三、后端代码(Springboot) 1、接口层方

    2024年01月17日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包