tnbapp/src/views/my/MyProfile.vue

<template>
  <el-row class="movie-list">
    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>我的资料</span>
          </div>
          <div class="text item">
            <el-form ref="form" :model="loginUser" label-width="80px">
              <el-form-item label="用户 ID">
                <el-input v-model="loginUser.userId" style="padding-right: 1px" readonly />
              </el-form-item>
              <el-form-item label="用户名">
                <el-input v-model="loginUser.username" style="width: 70%; padding-right: 10px" />
                <el-button size="mini" type="info" @click="updateScreenName">更新</el-button>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="loginUser.email" style="width: 70%; padding-right: 10px" />
                <el-button size="mini" type="info" @click="updateScreenName">更新</el-button>
              </el-form-item>
              <el-form-item label="手机">
                <el-input v-model="loginUser.mobile" style="width: 70%; padding-right: 10px" />
                <el-button size="mini" type="info" @click="updateScreenName">更新</el-button>
              </el-form-item>
              <el-form-item label="显示名">
                <el-input v-model="loginUser.screenName" style="width: 70%; padding-right: 10px" />
                <el-button size="mini" type="info" @click="updateScreenName">更新</el-button>
              </el-form-item>
              <el-form-item label="签名">
                <el-input v-model="loginUser.signature" style="width: 70%; padding-right: 10px" />
                <el-button size="mini" type="info" @click="updateSignature">更新</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-row>
    </el-col>
    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>更新我的头像</span>
          </div>
          <div class="text item">
            <el-tooltip class="item" effect="dark" content="点击更新我的头像" placement="top-end">
              <el-upload
                class="avatar-uploader"
                :action="imgOssUrl"
                :headers="imgHeaders"
                :data="imgData"
                :with-credentials="true"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="loginUser" :src="loginUser.avatarUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-tooltip>
          </div>
        </el-card>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { updateAvatar } from '@/api/account'
import { getAuthedUser, updateAuthedUser } from '@/utils/auth'
import { getAvatarChannelInfo } from '@/api/file'

export default {
  name: 'MyProfile',
  data() {
    return {
      imgOssUrl: '',
      imgHeaders: {
        Authorization: ''
      },
      imgData: {
        channelId: 0
      },
      coverUrl: null,
      // ****************************************************************************************************************
      loginUser: null
    }
  },
  created() {
    this.loginUser = getAuthedUser()
    getAvatarChannelInfo().then(res => {
      if (res.code === 0) {
        const resData = res.data
        this.imgData.channelId = resData.channelId
        this.imgOssUrl = resData.ossUrl
        this.imgHeaders.Authorization = 'Bearer ' + resData.token
      } else {
        this.$notify({
          title: '提示',
          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
          type: 'error',
          duration: 3000
        })
      }
    }).catch(error => {
      this.$notify({
        title: '提示',
        message: error.message,
        type: 'warning',
        duration: 3000
      })
    })
  },
  mounted() {
  },
  methods: {
    // ****************************************************************************************************************
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('头像文件只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('头像文件大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleAvatarSuccess(res, file) {
      if (res.code === 0) {
        const resData = res.data
        this.coverUrl = URL.createObjectURL(file.raw)

        const avatar = {}
        avatar.channelId = this.imgData.channelId
        avatar.uploadId = resData.uploadId
        updateAvatar(avatar).then(resp => {
          if (resp.code === 0) {
            this.loginUser.avatarUrl = resp.data.url
            updateAuthedUser(this.loginUser)
          } else {
            this.$notify({
              title: '头像更新失败',
              message: resp.msg,
              type: 'warning',
              duration: 3000
            })
          }
        })
      } else {
        this.$notify({
          title: '提示',
          message: '头像上传失败，请重试！' + res.msg,
          type: 'warning',
          duration: 3000
        })
      }
    },
    // ****************************************************************************************************************
    updateScreenName() {
      console.log('更新显示名')
    },
    updateSignature() {
      console.log('更新签名')
    }
  }
}
</script>

<style>
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 256px;
  height: 256px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 256px;
  height: 256px;
  display: block;
}
</style>