修改用户头像

1). 新建修改头像页

在 src/views/users 下新建 Avatar.vue 文件，复制贴入以下代码：

src/views/users/Avatar.vue

 1 <template>
 2   <div class="col-md-9 left-col">
 3     <div class="panel panel-default padding-md">
 4         <div class="panel-body">
 5             <h2><i class="fa fa-picture-o"></i> 请输入头像地址</h2>
 6         <hr>
 7         <div data-validator-form>
 8           <div class="form-group">
 9             <label>头像预览：</label>
10             <div>
11               <img :src="avatar" class="avatar-preview-img">
12             </div>
13           </div>
14           <div class="form-group row">
15             <div class="col-md-8">
16               <input v-model.trim.lazy="avatar" v-validator.required="{ title: '头像地址' }" type="text" class="form-control avatar-input">
17             </div>
18             <div class="clearfix"></div>
19           </div>
20 
21           <div class="form-group">
22             <button type="submit" class="btn btn-lg btn-primary" @click="updateAvatar">上传头像</button>
23           </div>
24         </div>
25         </div>
26     </div>
27   </div>
28 </template>
29 
30 <script>
31 export default {
32   name: 'EditAvatar',
33 data() {
34   return {
35     avatar: '' // 头像地址
36   }
37 },
38 // 在实例创建完成后，初始化头像地址的值
39 created() {
40   // 获取仓库的用户信息
41   const user = this.$store.state.user
42 
43   if (user && typeof user === 'object') {
44     // 将仓库的用户头像赋值给当前头像地址
45     this.avatar = user.avatar
46   }
47 },
48 methods: {
49   // 更新头像
50   updateAvatar() {
51     const avatar = this.avatar
52 
53     // 如果头像地址不为空
54     if (avatar) {
55       // 新建一个 Image 的实例
56       let img = new Image()
57 
58       // 加载成功时，上传图片
59       img.onload = () => {
60         // 依然分发一个 updateUser 的事件，这里只需传入头像信息
61         this.$store.dispatch('updateUser', { avatar })
62         this.$message.show('上传成功')
63       }
64 
65       // 加载失败时，只显示一个失败的提示
66       img.onerror = () => {
67         this.$message.show('上传失败', 'danger')
68       }
69 
70       // 指定图片地址
71       img.src = avatar
72     }
73   }
74 }
75 }
76 </script>
77 
78 <style scoped>
79 .avatar-preview-img { min-width: 200px; min-height: 200px; max-width: 50%;}
80 </style>

2). 添加修改头像路由

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

src/router/routes.js

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