vue+elementUI实现表单和图片上传及验证功能示例_elementui上传头像,element表单图片验证资源-CSDN文库

版权申诉

5星 · 超过95%的资源 100 浏览量 2020-10-17 00:28:08 上传评论 3 收藏 103KB PDF 举报

在现代的前端开发中，表单提交和图片上传是常见的交互形式，而Vue.js作为一种渐进式JavaScript框架，配合Element UI这一基于Vue 2.0的桌面端组件库，可以便捷地搭建出美观且功能强大的界面。 ### Vue + Element UI 实现表单和图片上传及验证功能的知识点 #### 1. Vue.js和Element UI结合使用 Vue.js是一个灵活且高性能的JavaScript框架，允许开发者以数据驱动和组件化的模式构建复杂的单页面应用（SPA）。Element UI则是一个使用Vue 2.0开发的桌面端组件库，它提供了丰富的组件，使得开发者可以快速构建出美观的界面。 #### 2. 表单验证在本示例中，通过使用Element UI的<el-form-item>与<el-form>组件，实现了表单内容的验证。验证规则通过rules属性定义，涵盖了必填项、正则匹配等验证方式。例如： - 必填项验证通过设置`{required:true, message:'必填项', trigger:'blur'}`实现。 - 自定义验证规则，如checkNumber函数用于验证数字格式。在<el-form-item>中设置prop属性与v-model进行双向绑定，确保表单输入与数据同步。 #### 3. 图片上传与限制在进行图片上传时，示例中通过<el-upload>组件实现，并设置了`limit="1"`以限制只能上传一张图片。同时，在图片上传中使用了`before-upload`事件处理函数`beforeupload`，以便在实际上传图片给后端服务器之前进行一些自定义处理（例如检查文件类型、大小等）。 #### 4. 新增和编辑共用组件处理在一些场景中，新增和编辑数据使用的可能是同一个表单界面。为了处理这种情况，可以通过传递不同的props来区分操作是新增还是编辑。props包括`dialogType`（区分是新增还是编辑）和`keypersonList`（表单原始数据）。 #### 5. 图片和表单数据一起上传在实际应用中，可能需要将图片与表单数据同时提交给后端。示例中阻止了图片的自动上传，而是通过一个保存按钮触发整个表单的提交，其中包括图片和表单数据。这一点通过<el-upload>组件的属性`auto-upload="false"`实现，并在触发提交时通过代码逻辑将图片和表单数据一起发送到服务器。 #### 6. 动态样式和状态示例中还展示了如何动态设置组件的样式，例如在<el-upload>中根据`dialogImageUrl`变量设置背景图。这通常是利用Vue的数据绑定和组件的属性动态控制实现的。 #### 7. 整合实例分析整个示例通过一个具体的实现案例将上述概念和知识点结合起来，展示了如何在Vue项目中使用Element UI构建表单，并集成了图片上传和验证功能。代码通过实例化组件、传入props、监听事件等步骤组织，最终实现了一个界面友好、功能完善的表单提交功能。 ### 结论通过本示例，开发者可以了解到如何在使用Vue.js和Element UI的项目中，实现表单的创建、验证和图片上传。核心点包括使用Element UI提供的表单和上传组件，定义验证规则，以及动态控制组件属性。掌握这些知识点，将有助于构建更为强大且易于维护的前端应用。

资源推荐

资源详情

资源评论

vue+elementUI实现表单和图片上传及验证功能示例实现表单和图片上传及验证功能示例

主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可

以参考下

本文实例讲述了vue+elementUI实现表单和图片上传及验证功能。分享给大家供大家参考，具体如下：

最终实现需求如下图：

form表单内容与重点人员图片同时上传且图片为必填项

分析弹框页需要解决的问题有：

1、表单内容的验证及必填项

2、新增和编辑用同一个组件如何处理数据

3、图片需要和信息一起传递（即不允许自动上传）

4、图片必填的验证问题

针对上述问题作出方案：

1、el-form的表单验证需要注意几个地方：

a：el-form-item的prop值需要和表单标签的v-model值保持一致

例如：

<el-form-item label="姓名：" prop="name">

<el-input style="width:1rem;" v-model="addKeyPersonForm.name" placeholder="请输入姓名"></el-input>

</el-form-item>

b：验证规则有直接用element官网提供的也有自定义的

例如：其中checkNumber就是自定义的验证数字的正则

rules: { // 表单验证

name: [

{ required: true, message: '必填项', trigger: 'blur' }

age: [

{ required: true, message: '必填项', trigger: 'blur' },

{ validator: checkNumber, trigger: 'blur' }

sex: [

{ required: true, message: '必填项', trigger: ['blur', 'change'] }

nationlity: [

{ required: true, message: '必填项', trigger: ['blur', 'change'] }

userType: [

{ required: true, message: '必填项', trigger: ['blur', 'change'] }

idCard: [

{ required: true, message: '必填项', trigger: 'blur' },

{ validator: checkIdCard, trigger: 'blur' }

registered: [

{ required: true, type: 'array', message: '必填项', trigger: ['blur', 'change'] }

registeredDetails: [

{ required: true, message: '必填项', trigger: 'blur' }

domicile: [

{ required: true, type: 'array', message: '必填项', trigger: ['blur', 'change'] }

domicileDetails: [

{ required: true, message: '必填项', trigger: 'blur' }

file: [

{ required: true, message: '请上传图片' }

plateNumber: [

{ validator: checkPlateNum, trigger: 'change' }

]

}

2、新增和编辑问题需要我们在打开组件的时候传递两个值

props: {

dialogType: { //是新增还是编辑，用于判断

type: String

keypersonList: { //表单的原始值

type: Object

}

3、图片和form表单内容一起上传

首先我们需要阻止图片的自动上传让它等到我们点击保存按钮的时候再一起传给后台

我们看这段代码就是图片上传组件

<el-upload class="upload-img"

:style="{backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"

ref="uploadxls"

action="aaa"

::limit="1"

:show-file-list="false"

:on-change="handlePictureCardPreview"

:before-upload="beforeupload"

accept="image/png,image/gif,image/jpg,image/jpeg">

</el-upload>

action我们随便填一个就好，重点是这一句:before-upload="beforeupload"在图片上传之前执行beforeupload方法在里面return false就可以实现阻

止upload自动上传

// 阻止upload的自己上传，进行再操作

beforeupload (file) {

this.formData.append('file', file)

return false

}

关于图片和表单文件一起上传我们选择了formData格式存储数据用于上传

选择了图片并填写必填信息之后点击保存进行上传操作，在onSubmit方法里把表单信息都append到formData里that.$refs.uploadxls.submit() // 提

交时触发了before-upload函数--》完成图片的上传即执行beforeupload方法

4、图片必填的验证问题：

a、如果没有选择图片点击保存则图片提示：请上传图片

b、此时选择了图片则“请上传图片”消失

验证规则里有一条file就是做图片必填验证的

file: [

{ required: true, message: '请上传图片' }

]

c、在编辑重点人员信息时重点人员图片已存在没有进行图片上传操作此时点击保存应该不提示“请上传图片”，未解决这个问题我们在上传时添加

判断：

如果是编辑信息且未进行过图片上传操作则去掉file验证

就是以下代码

that.rules.file = [{ required: true, message: '请上传图片' }]

if (that.dialogType !== 'add' && !this.doUpload) {

that.rules.file = []

that.$refs['uploadElement'].clearValidate()

}

整个弹框组件的代码如下：

<el-form :inline="true"

ref="addKeyPersonForm"

:model="addKeyPersonForm"

class="demo-form-inline"

label-width="1.4rem"

:rules="rules">

<el-form-item label="姓名：" prop="name">

<el-input style="width:1rem;" v-model="addKeyPersonForm.name" placeholder="请输入姓名"></el-input>

</el-form-item>

<el-form-item label="性别：" label-width="0.64rem" prop="sex">

<el-select style="width:0.65rem;" v-model="addKeyPersonForm.sex" placeholder="请选择">

<el-option label="男" value="1"></el-option>

<el-option label="女" value="2"></el-option>

</el-select>

</el-form-item>

<el-form-item label="年龄：" label-width="0.64rem" prop="age">

<el-input style="width:0.65rem;" v-model="addKeyPersonForm.age" placeholder="请输入"></el-input>

</el-form-item>

<el-form-item prop="file" class="upload-img-form" ref="uploadElement">

剩余8页未读，继续阅读

评论收藏

内容反馈

版权申诉

2301_78099417

2024-02-06

这个资源值得下载，资源内容详细全面，与描述一致，受益匪浅。

weixin_38738983

粉丝: 5
资源: 872

vue+elementUI实现表单和图片上传及验证功能示例

vue中使用element-ui进行表单验证的实例代码

使用elementUI实现将图片上传到本地的示例

vue+elementUi图片上传组件使用详解

Vue+Element-UI实现上传图片并压缩

Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）

vue+elementUI实现图片上传功能

详解element-ui中表单验证的三种方式

上传头像回显demo

vue中使用elementUI组件手动上传图片功能

Vue+Element实现动态生成新表单并添加验证功能

vue+ElementUI 关闭对话框清空验证,清除form表单的操作

基于vue elementui简约通用网站后台登录

vue+elementui 对话框取消 表单验证重置示例

springboot+vue前后端分离 实现超大文件分块上传

Vue ElementUi同时校验多个表单(巧用new promise)

上传头像裁剪,拍照，含进度条功能

vue 更改头像功能实现

表单图片上传

element ui多图片上传加修改回显

2020最新-Vue ElementUi入门实战视频教程.txt

vue.js+ElementUI实现进度条提示密码强度效果

解决vue+ element ui 表单验证有值但验证失败问题

vue_ElementUI_shop:基于vue+ElementUI，一个电商demo，调用外部接口

vueelementui动态表单

vue+element_ui后台demo

最新资源

vue+elementui 对话框取消表单验证重置示例

springboot+vue前后端分离实现超大文件分块上传