效果如下:
<template>
<div>
<!-- 头像上传开始 -->
<el-form ref="form" :model="form" :rules="rules" :label-position="labelPosition">
<el-form-item ref="upload" label="个人照片" prop="imageUrl">
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:http-request="uploadFile"
:before-upload="beforeAvatarUpload"
list-type="picture-card"
:on-change="handleFile"
>
<el-image v-if="form.imageUrl" :src="form.imageUrl" class="imageSize" :fit="fit" />
<i v-else class="el-icon-plus avatar-uploader-icon" />
<el-button
size="small"
type="primary"
style="float: right; position: absolute; bottom: 0; right: 50px"
>上传照片</el-button
>
<div slot="tip" class="el-upload__tip">
<p class="txt">
要求说明:
<br />照片必需是近期、正面、免冠、白底、清晰的本人证件照 ; 照片格式应为 jpg 或 jpeg
格式,文件小于5MB。
</p>
</div>
</el-upload>
</el-form-item>
</el-form>
<!-- 头像上传结束 -->
</div>
</template>
<script>
export default {
data(){
return{
form: {
imageUrl: '' // 回显的图片地址
},
rules: { imageUrl: [{ required: true, message: '请上传个人照片', trigger: 'blur' }] }
}
},
methods: {
//判断是否已上传,已经上传清除校验提示
handleFile(file, fileList) {
if (fileList.length > 0) {
this.form.imageUrl = file.url //image图片回显
this.$refs.form.clearValidate('imageUrl') //清除图片文字校验
}
},
submit() {
// 图片验证
this.$refs.upload.form.validate((uploadValid) => {
if (uploadValid) {
里面写的是图片必传后,你所需要执行的事件
}
})
}
}
}
</script>
<style scoped>
</style>