修改用戶頭像

1). 新建修改頭像頁

在 src/views/users 下新建 Avatar.vue 文件，復制貼入以下代碼：

src/views/users/Avatar.vue

<template>
  <div class="col-md-9 left-col">
    <div class="panel panel-default padding-md">
        <div class="panel-body">
            <h2><i class="fa fa-picture-o"></i> 請輸入頭像地址</h2>
        <hr>
        <div data-validator-form>
          <div class="form-group">
            <label>頭像預覽：</label>
            <div>
              <img :src="avatar" class="avatar-preview-img">
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-8">
              <input v-model.trim.lazy="avatar" v-validator.required="{ title: '頭像地址' }" type="text" class="form-control avatar-input">
            </div>
            <div class="clearfix"></div>
          </div>

          <div class="form-group">
            <button type="submit" class="btn btn-lg btn-primary" @click="updateAvatar">上傳頭像</button>
          </div>
        </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditAvatar',
data() {
  return {
    avatar: '' // 頭像地址
  }
},
// 在實例創建完成后，初始化頭像地址的值
created() {
  // 獲取倉庫的用戶信息
  const user = this.$store.state.user

  if (user && typeof user === 'object') {
    // 將倉庫的用戶頭像賦值給當前頭像地址
    this.avatar = user.avatar
  }
},
methods: {
  // 更新頭像
  updateAvatar() {
    const avatar = this.avatar

    // 如果頭像地址不為空
    if (avatar) {
      // 新建一個 Image 的實例
      let img = new Image()

      // 加載成功時，上傳圖片
      img.onload = () => {
        // 依然分發一個 updateUser 的事件，這里只需傳入頭像信息
        this.$store.dispatch('updateUser', { avatar })
        this.$message.show('上傳成功')
      }

      // 加載失敗時，只顯示一個失敗的提示
      img.onerror = () => {
        this.$message.show('上傳失敗', 'danger')
      }

      // 指定圖片地址
      img.src = avatar
    }
  }
}
}
</script>

<style scoped>
.avatar-preview-img { min-width: 200px; min-height: 200px; max-width: 50%;}
</style>

2). 添加修改頭像路由

打開 src/router/routes.js 文件，添加修改頭像路由 EditAvatar（注釋部分是涉及的修改）:

src/router/routes.js

  {
        path: '/users/1/edit_avatar',
        name: 'EditAvatar',
        component: () => import('@/views/users/Avatar.vue'),
        meta: { auth: true }
      }