我们看这段代码就是图片上传组件
<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>action我们随便填一个就好，重点是这一句:before-upload=”beforeupload”在图片上传之前执行beforeupload方法在里面return false就可以实现阻止upload自动上传
// 阻止upload的自己上传，进行再操作
beforeupload (file) {
this.formData.append('file', file)
return false
}关于图片和表单文件一起上传我们选择了formData格式存储数据用于上传
选择了图片并填写必填信息之后点击保存进行上传操作，在onSubmit方法里把表单信息都append到formData里that.$refs.uploadxls.submit() // 提交时触发了before-upload函数–》完成图片的上传即执行beforeupload方法
4、图片必填的验证问题：
a、如果没有选择图片点击保存则图片提示：请上传图片
b、此时选择了图片则“请上传图片”消失
验证规则里有一条file就是做图片必填验证的
file: [
{ required: true, message: '请上传图片' }
]c、在编辑重点人员信息时重点人员图片已存在没有进行图片上传操作此时点击保存应该不提示“请上传图片”，未解决这个问题我们在上传时添加判断：
如果是编辑信息且未进行过图片上传操作则去掉file验证
就是以下代码
that.rules.file = [{ required: true, message: '请上传图片' }]if (that.dialogType !== 'add' && !this.doUpload) {
that.rules.file = [] that.$refs['uploadElement'].clearValidate()
}整个弹框组件的代码如下：
<template>
<div class="add-keyperson-dialog">
<el-form :inline="true"
ref="addKeyPersonForm"
:model="addKeyPersonForm"
