vue+elementUI,实现表单验证中的图片上传验证(el-form与el-upload)

简介

目前在做一个商城后台管理系统，在实现表单的过程中需要上传商品图片、二维码、头像等，需求是每次只能上传一张图片，并且需要进行相关的非空验证，操作演示如下图所示：

以下是具体的实现思路，希望能帮到大家。

el-form表单的实现及非空验证

本文所实现的表单验证是普通的输入验证，若想自定义表单验证规则，可以前往elementUI官方文档进行学习。
表单验证可以理解为以下几个步骤：
1、在 el-form 上添加规则对象，名称可自定义 :rules="kfFormRules"
2、给 el-form-item 添加属性 props="名称"，需注意的是这个名称需要与规则对象kfFormRules中的属性名一致，不然验证不了
3、在 data 中定义 kfFormRules规则。
4、表单的清空，需要给表单绑定一个ref,js中通过$$refs$我们可以获取到整个表单对象。然后通过resetFields()方法我们可以清空整个表单，例如：this.$refs$.kfFormRef.resetFields();。通过clearValidate()我们可以移除某一个验证规则的提示，例如：this.$refs.kfFormRef.clearValidate('codeImg'); (注：CSDN文章编写有些地方写不上美元符号，若要复制代码请直接前往代码区。)
5、关于图片的重置，见下方的el-upload部分
页面布局如下：

页面布局代码如下：

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自带的样式）

关于图片的重置，我用了一个比较笨的方法，具体可以看下面我的实现步骤：
（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.$refs.kfFormRef.resetFields();
            if(this.headFileList.length>0) {
                this.headFileList.splice(0,1)
                this.remove(this.headFile,this.headFileList);
            }
            if(this.codeFileList.length>0) {
                this.codeFileList.splice(0,1)
                this.codeRemove(this.codeFile,this.codeFileList)
            }
        },

el-form中，实现el-upload的验证

点击图片上传，清空验证结果，并且修改验证对象kfFormRules，移除里面关于头像上传的条件headImg，这些逻辑需要在on-change中去实现，然后在点击确定就不会有关于headImg的验证，具体可以看上图标出的控制台提示。
代码实现如下：

codeChange(file, fileList) {
            this.codeFile = file;
            this.codeFileList = 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){
                this.kfFormRules.codeImg = [{ required: true, message: '请上传微信二维码', trigger: 'change'}];
            }
            this.hideCode = fileList.length >= this.limitCode;
        },

全部代码如下：