vue elementUI上传和验证表单和图片功能示例

本文通过一个实例说明vue elementUI可以上传和验证表单和图片。分享给大家参考，如下：

最终实施要求如下：

表单表单内容和关键人员图片同时上传，需要图片

分析框架页面需要解决的问题如下：

1.表格内容和所需项目的验证

2.如何通过添加和编辑同一个组件来处理数据

3.图片需要和信息一起传输(即不允许自动上传)

4.所需图片的验证

要解决以上问题，制定一个计划：

1.el-form的表单验证应注意的几个问题：

a: El表单项的正确值需要与表单标签的v型值一致

例如：

El-form-item标签=' name:' prop=' name ' El-input style=' width :1 rem；'V-model=' addkeypersonform。name' placeholder='请输入名称'/el-input/el-form-itemb:验证规则由element官网直接提供或自定义

例如，检查号是自定义验证号的规律性

rule : {//表单验证名称：[{ required d : true，message: '必填项'，trigger: '模糊' }]，age :[{ required d 3360 true，Message: '必填项'，trigger: '模糊' }，{validator:支票号码，trigger3360 '模糊' }]，sex 3360[{ required d : true，message 住所：[{ required d : true，type:' array '，message:' required item '，trigger: ['blur '，' change']}]，住所详细信息：[{ required d : true，message:' required items '，trigger:' blur'}]，文件3360[{ required d : true，message 3: '请上传图片' }]，车牌号码： 添加和编辑问题需要我们在打开组件时传递两个值。

增加或编辑了prop : { dialogtype : {//用于判断Type: String}、key persist 3360 {//表单type: Object }的原值}3。将图片与表单内容一起上传。

首先，我们需要停止图片的自动上传，让它等到我们点击保存按钮后再发送到后台

我们看到这个代码是图像上传组件

El-upload class=' upload-img ' : ST