vue+elementUI，实现表单验证中的图⽚上传验证（el-form 与el-upload ）⽬录
简介
⽬前在做⼀个商城后台管理系统，在实现表单的过程中需要上传商品图⽚、⼆维码、头像等，需求是每次只能上传⼀张图⽚，并且需要进⾏
相关的⾮空验证，操作演⽰如下图所⽰：
以下是具体的实现思路，希望能帮到⼤家。
el-form 表单的实现及⾮空验证
本⽂所实现的表单验证是普通的输⼊验证，若想⾃定义表单验证规则，可以前往进⾏学习。
表单验证可以理解为以下⼏个步骤：
1、在 el-form 上添加规则对象，名称可⾃定义 :rules=“kfFormRules”
2、给 el-form-item 添加属性 props=“名称”，需注意的是这个名称需要与规则对象kfFormRules中的属性名⼀致，不然验证不了
3、在 data 中定义 kfFormRules规则。
4、表单的清空，需要给表单绑定⼀个ref,js中通过$我们可以获取到整个表单对象。然后通过resetFields()⽅法我们可以清空整个表单，例如：this..setFields();。通过clearValidate()我们可以移除某⼀个验证规则的提⽰，例如：
this.$refs.kfFormRef.clearValidate(‘codeImg’); (注：CSDN⽂章编写有些地⽅写不上美元符号，若要复制代码请直接前往代码区。)
5、关于图⽚的重置，见下⽅的el-upload部分
页⾯布局如下：
页⾯布局代码如下：
refs refs
<template>
<!--商品详情界⾯-->
<div>
<!--⾯包屑导航区域-->
<breadcrumb></breadcrumb>
<!--卡⽚视图区域-->
<el-card>
<div slot="header">
<span>基本信息</span>
</div>
<el-form label-width="120px":model="kfForm" ref="kfFormRef":rules="kfFormRules">
<el-form-item label-width="0px" prop="name">
<el-input placeholder="客服名称" v-model="kfForm.name">
<template slot="prepend">客服名称</template>
</el-input>
</el-form-item>
<el-form-item label-width="0px" prop="wx_number">
<el-input placeholder="号" v-model="kfForm.wx_number">
<template slot="prepend">号码</template>
</el-input>
</el-form-item>
<el-form-item label="客服头像上传：" prop="headImg">
<el-upload
:action="uploadURL"
list-type="picture-card"
:class="{hide:hideUpload}"
name="files"
:on-preview="handlePreview"
:
on-remove="remove"
:on-change="uploadChange"
:http-request="headUpload">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="previewVisible">
<img width="100%":src="previewPath" alt="">
</el-dialog>
</el-form-item>
<el-form-item label="⼆维码上传：" prop="codeImg">
<el-upload
:
action="uploadURL"
list-type="picture-card"
:class="{hide:hideCode}"
name="files"
:on-preview="codePreview"
:on-remove="codeRemove"
:on-change="codeChange"
:http-request="codeUpload">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="codeVisible">
<img width="100%":src="codePath" alt="">
</el-dialog>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="certain">确定</el-button>
<el-button type="primary" @click="clearAll">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
el-upload，只允许上传⼀张图⽚的实现步骤
el-upload内置有on-remove和on-change等函数勾⼦，限制只传⼀张图，主要也是在这两个勾⼦中去操作
（1）on-remove：⽂件列表移除⽂件时的钩⼦
（2）on-change：⽂件状态改变时的钩⼦，添加⽂件、上传成功和上传失败时都会被调⽤
el-upload：上传⼀张图⽚后隐藏上传按钮的具体步骤如下：
（1）el-upload⾥⾯绑定⼀个占位class，:class="{hide:hideUpload}"
（2）data⾥⾯初始值：hideUpload: false, limitCount:1
（3）on-change绑定的⽅法⾥写：this.hideUpload = fileList.length >= this.limitCount;
（4）on-change绑定的⽅法⾥写：this.hideUpload = fileList.length >= this.limitCount;
（5）style，把scoped去掉（或者外部引⼊样式⽂件，主要⽬的是为了修改element-ui⾃带的样式）
<style>
.hide .el-upload--picture-card {
display: none;
}
</style>
关于图⽚的重置，我⽤了⼀个⽐较笨的⽅法，具体可以看下⾯我的实现步骤：
（1）我定义了两个全局参数headFile和headFileList
（2）在on-change的uploadChange⽅法中给headFile，headFileList赋值
（3）在重置按钮的clearAll()⽅法中，判断headFileList的数组长度是否⼤于0，因为已经做了限制这个数组的长度不是0就是1，当它⼤于0的时候，移除数组中的值，然后将他作为第⼆个参数传⼊**remove()**⽅法中，⼩伙伴们肯定有疑问了，为什么不直接传⼀个空数组，更简单更⽅便，经测试如果直接传⼀个空数组，⽆法移除图⽚，所以采取了先获取再删除的⽅式。
代码⽚段如下：
data(){
return{
uploadURL:'',
previewPath:'',
previewVisible:false,
hideUpload:false,
limitCount:1,
headFile:'',
headFileList:'',
}
},
/
/ 处理图⽚预览效果
handlePreview(file){
this.previewPath = file.url;
this.previewVisible =true
},
remove(file, fileList){
if(fileList.length==0){
this.kfFormRules.headImg =[{ required:true, message:'请上传头像', trigger:'change'}];
}
this.hideUpload = fileList.length >=this.limitCount;
},
uploadChange(file, fileList){
this.headFile = file;
this.headFileList = fileList;
if(fileList.length==1){
let{headImg,...data}=this.kfFormRules;//删除kfFormRules中的headImg属性
this.kfFormRules = data;
}
this.$refs.kfFormRef.clearValidate('headImg');
this.hideUpload = fileList.length >=this.limitCount;
},
clearAll(){
this.$setFields();
if(this.headFileList.length>0){
this.headFileList.splice(0,1)
}
deFileList.length>0){
}
vue element admin},
el-form中，实现el-upload的验证
点击确定按钮，触发验证规则。
点击图⽚上传，清空验证结果，并且修改验证对象kfFormRules，移除⾥⾯关于头像上传的条件headImg，这些逻辑需要在on-change中去实现，然后在点击确定就不会有关于headImg的验证，具体可以看上图标出的控制台提⽰。
代码实现如下：
codeChange(file, fileList){
if(fileList.length==1){
let{codeImg,...data}=this.kfFormRules;
this.kfFormRules = data;
}
this.$refs.kfFormRef.clearValidate('codeImg');
this.hideCode = fileList.length >=this.limitCode;
},
在点击删除图⽚时，需要把验证规则重新加回来，代码实现如下：
codeRemove(file, fileList){
if(fileList.length==0){
deImg =[{ required:true, message:'请上传⼆维码', trigger:'change'}];
}
this.hideCode = fileList.length >=this.limitCode;
},
全部代码如下：
<template>
<template>
<!--商品详情界⾯-->
<div>
<!--⾯包屑导航区域-->
<breadcrumb></breadcrumb>
<!--卡⽚视图区域-->
<el-card>
<div slot="header">
<span>基本信息</span>
</div>
<el-form label-width="120px":model="kfForm" ref="kfFormRef":rules="kfFormRules">
<el-form-item label-width="0px" prop="name">
<el-input placeholder="客服名称" v-model="kfForm.name">
<template slot="prepend">客服名称</template>
</el-input>
</el-form-item>
<el-form-item label-width="0px" prop="wx_number">
<el-input placeholder="号" v-model="kfForm.wx_number">
<template slot="prepend">号码</template>
</el-input>
</el-form-item>
<el-form-item label="客服头像上传：" prop="headImg">
<el-upload
:action="uploadURL"
list-type="picture-card"
:class="{hide:hideUpload}"
name="files"
:on-preview="handlePreview"
:on-remove="remove"
:on-change="uploadChange"
:http-request="headUpload">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="previewVisible">
<img width="100%":src="previewPath" alt="">
</el-dialog>
</el-form-item>
<el-form-item label="⼆维码上传：" prop="codeImg">
<el-upload
:action="uploadURL"
list-type="picture-card"
:class="{hide:hideCode}"
name="files"
:on-preview="codePreview"
:on-remove="codeRemove"
:on-change="codeChange"
:http-request="codeUpload">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="codeVisible">
<img width="100%":src="codePath" alt="">
</el-dialog>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="certain">确定</el-button>
<el-button type="primary" @click="clearAll">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import axios from'axios'
import breadcrumb from"../../components/breadcrumb/breadcrumb";
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论