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

2020-06-16 05:57:10易采站长站整理

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">
<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">
<i v-show="!dialogImageUrl" class="el-icon-upload avatar-uploader-icon"></i>
<div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上传照片</div>
</el-upload>
</el-form-item>
<!--<img :src="dialogImageUrl"/>-->
<el-form-item label="身份证号:" prop="idCard">
<el-input style="width:1.7rem;" v-model="addKeyPersonForm.idCard" placeholder="请输入身份证号"></el-input>
</el-form-item>
<el-form-item label="国籍:" label-width="0.64rem" prop="nationlity">
<el-select style="width:1.37rem;" v-model="addKeyPersonForm.nationlity" placeholder="请选择">
<el-option label="中国" value="中国"></el-option>
</el-select>
</el-form-item>
<el-form-item label="车牌号:" prop="plateNumber">
<el-input style="width:1.7rem;" v-model="addKeyPersonForm.plateNumber" placeholder="请输入车牌号"></el-input>
</el-form-item>
<el-form-item label="类别:" label-width="0.64rem" prop="userType">
<!--<el-select style="width:1.37rem;" v-model="addKeyPersonForm.userType" placeholder="请选择">
<el-option label="精神病人" value="0"></el-option>
<el-option label="涉毒" value="1"></el-option>
</el-select>-->
<el-select style="width:1.37rem;" v-model="addKeyPersonForm.userType" placeholder="请选择">