![](https://img-blog.csdnimg.cn/img_convert/fc0efb1abd9b4dd9877eb62107db76a3.png)
element upload来实现图片上传
首先封装了图片组件,结合自定义model,将图片地址传给父组件,进行展示
// 图片组件
<template>
<div class="upload-block">
<el-upload class="avatar-uploader" :headers="headers" v-loading="loading" element-loading-spinner="el-icon-loading" :action="action" :accept="accept" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<div class="text">{{tip}}</div>
<div class="delete" v-if="imageUrl" @click="deleteFun()"><i class="el-icon-delete"></i></div>
</div>
</template>
<script>
/* eslint-disable */
export default {
data () {
return {
imageUrl: '',
loading: false,
headers: {
Authorization: 'Bearer ' + localStorage.getItem('Authorization')
}
}
},
props: {
action: {
default: ''
},
size: {
default: '10'
},
tip: {
default: ''
},
accept: {
default: 'image/jpeg,image/png'
},
value: {
default: ''
},
// 删除图片方法
deleteFun: {
default: () => { }
}
},
watch: {
value: {
deep: true,
immediate: true,
handler (val) {
this.imageUrl = val
},
},
},
model: {
prop: 'value',
event: 'getvalue'
},
methods: {
// 图片上传成功后,值传给父组件
handleAvatarSuccess (res, file) {
this.$emit('getvalue', res.data)
this.loading = false
},
// 上传时校验图片大小
beforeAvatarUpload (file) {
this.loading = true
const size = parseInt(this.size)
const isLt2M = file.size / 1024 / 1024 < size;
if (!isLt2M) {
this.$message.error(`上传头像图片大小不能超过 ${size}MB!`);
this.loading = false
}
return isLt2M;
}
}
}
</script>
<style lang="less" scoped>
.avatar-uploader {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 104px;
height: 104px;
&:hover {
border-color: #182a87 !important;
}
}
.avatar-uploader-icon {
font-size: 16px;
color: #8c939d;
width: 104px;
height: 104px;
line-height: 80px;
text-align: center;
position: relative;
background: #f5f7fa;
&::after {
display: block;
content: '上传图片';
font-size: 12px;
position: absolute;
color: #606266;
left: 28px;
bottom: -6px;
}
}
.avatar {
width: 104px;
height: 104px;
display: block;
}
.upload-block {
position: relative;
.text {
font-size: 12px;
color: #999;
}
.disabled {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
cursor: not-allowed;
}
.delete {
position: absolute;
top: 0;
left: 110px;
z-index: 1;
cursor: pointer;
}
}
</style>
// 父组件
<el-form-item label="图片" prop="img">
<YcUploadImg v-model="form.img" tip="大小不超过10M的jpg或png格式的图片" action="api/permission/file/upload" :deleteFun="deleteFun" />
</el-form-item>
methods: {
deleteFun () {
this.form.img = ''
},
}