modefyAvatar.vue

<template>
  <div class="modefy-avatar">
    <img class="avatar" :src="avatar" alt />
    <div class="btn">
      <van-uploader
        accept="image/*"
        :max-count="1"
        :before-delete="onDeleteAvatar"
        :after-read="onRead"
      >
        <van-button type="primary">上传新头像</van-button>
      </van-uploader>
      <van-button
        type="primary"
        :class="!canSubmit && 'deactive-btn'"
        plain
        @click="checkBtn"
        >确定</van-button
      >
    </div>
  </div>
</template>

<script>
import { setAvatar } from "@/api/user";
import { uploadImage } from "@/api/base";
export default {
  name: "ModefyAvatar",
  data() {
    return {
      canSubmit: false,
      avatar: "",
      imageUrl: ""
    };
  },
  mounted() {
    console.log(this.$route.query);
    const headImage = this.$route.query.headImage;
    if (headImage) {
      this.avatar = process.env.VUE_APP_BASE_URL + headImage;
    } else {
      this.avatar = require("@/assets/images/no_avatar.png");
    }
  },
  methods: {
    checkBtn() {
      if (!this.canSubmit) {
        return;
      }
      this.canSubmit = false;
      const params = {
        headImage: this.imageUrl,
        userId: JSON.parse(localStorage.getItem("user")).userId
      };
      setAvatar(params).then(res => {
        if (res.code === 0) {
          this.$toast.success("头像设置成功");
          this.$router.go(-1);
        }
      });
    },
    onOversize() {
      this.$toast.fail("上传头像超过了2M的限制,请重新上传");
    },
    onRead(file) {
      console.log("读取到图片了", file);
      const inviteCode = JSON.parse(localStorage.getItem("user")).inviteCode;
      if (!inviteCode) {
        this.$toast.fail("当前用户没有邀请码");
        return;
      }
      const params = {
        inviteCode: inviteCode
      };
      const fd = new FormData();
      fd.append("files", file.file);
      uploadImage(params, fd)
        .then(res => {
          console.log(res);
          this.avatar = file.content;
          this.imageUrl = res.zxUrl;
          this.canSubmit = true;
        })
        .catch(err => {
          console.log("上传图像", err);
          this.$toast.fail("图片上传失败,请重新选择");
        });
    },
    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: 25px;
}
.avatar {
  width: 345px;
  height: 345px;
  margin-bottom: 52px;
  border-radius: 4px;
}

.btn {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 345px;
  height: 44px;
  margin: 0 auto;
  .van-uploader {
    .van-button {
      position: absolute;
      top: 0;
      left: 0;
    }
    ::v-deep input {
      width: 165px;
      height: 44px;
    }
  }
  .van-button {
    width: 165px;
  }
  .deactive-btn {
    color: #969595e9;
    background-color: #dcd6d6;
    border-color: #dcd6d6;
  }
}
</style>