element表单验证上传
ZhangbiaoAAAAA 人气:0大概是这个样式
两个上传组件写在一个form-item里进行自定义表单验证
每次验证,通过判断上传组件绑定的值进行判断,callback不同的提示错误
<template> <div> <el-form :model="personalForm" :rules="rules" ref="personalForm" label-width="180px"> <el-row> <el-col :span="24"> <el-form-item label="SFZ证件照:" required style="" prop="merIdenImgFront"> <el-row type="flex" justify="space-between" class="uploadidcard"> <el-col :span="10"> <el-upload class="idCard1" :action="uploadURL" list-type="picture-card" :show-file-list="false" :on-success="handleAvatarSuccess1" accept=".JPG, .png, .jpeg" multiple="multiple" :on-change="idenImghandleChange" > <img v-if="merIdenImgFront" :src="merIdenImgFront" class="avatar" style="width:100%;height:100%"> </el-upload> </el-col> <el-col :span="10"> <el-upload class="idCard2" :action="uploadURL" list-type="picture-card" :show-file-list="false" :on-success="handleAvatarSuccess2" accept=".JPG, .png, .jpeg" multiple="multiple" :on-change="idenImghandleChange" > <img v-if="merIdenImgBack" :src="merIdenImgBack" class="avatar" style="width:100%;height:100%"> </el-upload> </el-col> </el-row> </el-form-item> </el-col> </el-row> <el-form-item label=""> <p style="color:#888">注:以上所需上传照片仅支持JPEG、GIF、PNG格式的图片,大小不超过2M。</p> </el-form-item> <el-form-item label=""> <div class="btn-wrap"> <button type="button" @click="personalSubmit('personalForm')">提交</button> </div> </el-form-item> </el-form> </div> </template> <script> export default { data() { // SFZ正面验证 var validateImgFront=(rule, value, callback)=>{//(关键代码) if(this.personalForm.merIdenImgFront==''&&this.personalForm.merIdenImgBack==''){ return callback(new Error('附件不能为空')) }else if(this.personalForm.merIdenImgFront==''){ return callback(new Error('请上传SFZ正面')) }else if(this.personalForm.merIdenImgBack==''){ return callback(new Error('请上传SFZ背面')) }else{ callback() } }; return { uploadURL:'',//自己的上传地址 personalForm:{ merIdenImgFront:'',//SFZ正面 merIdenImgBack:'',//SFZ反面 }, merIdenImgFront:'', merIdenImgBack:'', rules:{ // SFZ正反面 merIdenImgFront: [ {validator: validateImgFront, trigger: 'change'} ] } } }, methods:{ // 上传SFZ正面成功 handleAvatarSuccess1(response, file, fileList){ this.merIdenImgFront=file.url;//保存临时图片 this.personalForm.merIdenImgFront=response;//保存到提交表单 }, // 上传SFZ反面成功 handleAvatarSuccess2(response, file, fileList){ this.merIdenImgBack=file.url;//保存临时图片 this.personalForm.merIdenImgBack=response;//保存到提交表单 }, // SFZ表单验证 idenImghandleChange(){ this.$refs.personalForm.validateField('merIdenImgFront');//对部分表单字段进行校验的方法,也就是手动进行表单验证(关键代码) }, //提交 personalSubmit(formName){ this.$refs[formName].validate(async(valid) => { if (valid) { console.log('OJBK') } else { return false; } }); }, } } </script>
有一个问题是,点击图片上传后,就已经请求接口上传了。
正常来说,应该是点击提交后,才能进行上传。懒得改了,大家懂就行.
加载全部内容