效果:
结构:
<div>
<div class="badege_box">
<el-upload
class="avatar-uploader"
action=""
accept=".jpg,.jpeg,.webp,.png,.JPG,.JPEG"
:show-file-list="false"
:auto-upload="false"
:on-change="getFile">
<div class="uploadImg">
<img class="upload_icon_img" src="@/assets/images/baseMessage/upload.png" alt="">
<span>点击上传图片</span>
</div>
</el-upload>
<div class="badge_size">
<div class="maximum">
<img class="school_badge_img" v-if="imageUrl" :src="imageUrl">
</div>
<div class="big">
<img class="school_badge_img" v-if="imageUrl" :src="imageUrl">
</div>
<div class="small">
<img class="school_badge_img" v-if="imageUrl" :src="imageUrl">
</div>
</div>
</div>
<div class="upload_btn_badege">
<el-button type="primary" class="preserve" @click="submitImg">保存</el-button>
<!-- <el-button class="reset" @click="resetImg">取消</el-button> -->
</div>
</div>
.main_content {
.badege_box {
display: flex;
flex-direction: row;
.uploadImg {
width: 344px;
height: 344px;
text-align: center;
background-color: #f8f9fc;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 80px;
box-sizing: border-box;
.upload_icon_img {
height: 100px;
width: 100px;
}
.school_badge_img {
height: 100%;
width: 100%;
}
span {
font-size: 18px;
font-weight: 400;
color: rgba(210, 222, 236, 1);
}
// background: #f8f9fc url('') no-repeat center center;
}
.badge_size {
margin-left: 20px;
div {
background-color: #f8f9fc;
margin-bottom: 10px;
img {
width: 100%;
height: 100%;
}
}
.maximum {
width: 160px;
height: 160px;
}
.big {
height: 100px;
width: 100px;
}
.small {
width: 60px;
height: 60px;
}
}
}
.upload_btn_badege {
margin-top: 40px;
.preserve {
width: 160px;
}
.reset {
margin-left: 20px;
}
}
}
js:
export default {
data() {
return {
imageUrl: '',
imgs:''
};
},
methods: {
submitImg(){
//把this.imgs传给后台就行了
},
resetImg(){
this.imageUrl='';
this.imgs='';
},
getFile(file, fileList) {
this.getBase64(file.raw).then(res => {
this.imageUrl = res;
let badegeImg = this.imageUrl.split(',');
this.imgs = badegeImg[1];
console.log(this.imgs);
});
},
getBase64(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function() {
imgResult = reader.result;
};
reader.onerror = function(error) {
reject(error);
};
reader.onloadend = function() {
resolve(imgResult);
};
});
}
}
}