本文实例讲述了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表单内容一起上传
首先我们需要阻止图片的自动上传让它等到我们点击保存按钮的时候再一起传给后台
