<template> <div class="modefy-avatar"> <img class="avatar" :src="avatar" alt /> <div class="btn"> <van-button type="primary" plain>确定</van-button> <van-uploader :max-count="1" :before-delete="onDeleteAvatar" :after-read="onRead" > <van-button type="primary">上传新头像</van-button> </van-uploader> </div> </div> </template> <script> export default { name: "ModefyAvatar", data() { return { avatar: "" }; }, mounted() { if (!this.avatar) { this.avatar = require("@/assets/images/no_avatar.png"); } }, methods: { onRead(file) { this.avatar = file.content; console.log("file", file); }, onDeleteAvatar(file, detail) { return new Promise((resolve, reject) => { this.$dialog .confirm({ message: "确认删除图片?" }) .then(() => { this.fileList.splice(detail.index, 1); this.$toast.success("删除成功"); resolve(); }) .catch(error => { this.$toast.fail("已取消"); reject(error); }); }); } } }; </script> <style lang="scss" scoped> .modefy-avatar { box-sizing: border-box; text-align: center; padding-top: 115px; } .avatar { width: 345px; height: 345px; margin-bottom: 52px; border-radius: 4px; } .btn { display: flex; justify-content: space-around; .van-button { width: 165px; } } </style>