更换头像

配置路由

const routes = [
  // 最大级别的规则，对应的组件，会显示在 App.vue 中
  // 登录
  { path: '/login', component: () => import('@/views/Login.vue') },
  // 注册
  { path: '/reg', component: () => import('@/views/Reg.vue') },
  // 后台主页
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
    children: [
      { path: 'home', component: () => import('@/views/Chart.vue') },
      { path: 'user-info', component: () => import('@/views/user/UserInfo.vue') },
      { path: 'user-pwd', component: () => import('@/views/user/RePwd.vue') },
+     { path: 'user-avatar', component: () => import('@/views/user/UserAvatar.vue') }
    ]
  }
]

页面布局

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <!-- 卡片的内容区 -->
    <img src="@/assets/images/avatar.jpg" alt="" />
    <div class="mybtn">
      <!-- 两个按钮 -->
      <el-button type="primary" icon="el-icon-plus">选择图片</el-button>
      <el-button type="success" disabled icon="el-icon-cloudy">上传头像</el-button>
    </div>
  </el-card>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.mybtn {
  margin-top: 10px;
}
</style>

本地图片预览

基础-找到文件对象

1. 找到文件域（文件选择框） —— <Input type="file" />
2. input.files 表示选择的文件列表
3. input.files.length 表示选择了几张图片

4. input.files[0] 表示第一张图片的 文件对象。

   使用URL对象做预览

5. 根据文件对象，得来一个临时的 url 地址

   1. let url = URL.createObjectURL(文件对象)
6. 设置图片的 src 为 临时的url地址
   1. img.src = url

      使用FileReader对象做预览

      // 实例化对象
      let fr = new FileReader()
      // 生成base64格式的字符串，将结果存到 fr.result 中
      fr.readAsDataURL(文件对象)
      // 添加 load 事件
      fr.onload = function () {
      // fr.result 就是base64格式的字符串
      img.src = fr.result
      }
      

      更换头像

      点击按钮能选择图片

      希望选择图片，必须有一个 <input type="file" ref="file" >，所以在页面中，加入这个文件选择框。
      点击”选择图片的时候，设置单击事件”：@click="clickFile"
      对应的处理方法：

      clickFile() {
      // 点击选择图片，触发文件域的单击事件
      this.$refs.file.click()
      }
      

      文件域内容改变，创建base64字符串

      首先给文件域添加 change 事件：@change="fileChange"
      对应的处理方法：

      fileChange(e) {
      if (e.target.files.length > 0) {
      // 选择了图片，设置url=base64
      const fileObj = e.target.files[0] // ======== 文件对象
      const fr = new FileReader()
      fr.readAsDataURL(fileObj)
      // 这里必须使用箭头函数
      fr.onload = () => {
      this.url = fr.result // 把得到的base64字符串，赋值给数据项中的url
      }
      } else {
      this.url = '' // 没有选择图片，恢复url=''
      }
      }
      

      上述方法，将生成的base64字符串，存储到了 数据项 url 中，所以需要数据项：

      data() {
      return {
      url: '' // 准备存放base64格式的字符串
      }
      }
      

      测试：点击选择图片，选择一个图片，或者点击取消。看看 调试工具那里的 url 是否有值（刷新调试工具查看）

      图片预览

      根据url的有无，设置预览图片：

      <img :src="url" alt="" v-if="url" style="height: 350px; width: 350px; object-fit: cover" />
      <img src="@/assets/images/avatar.jpg" alt="" v-else />
      

      上传图片

      根据url的有无，设置上传按钮的禁用：

      <el-button type="success" :disabled="url ? false : true" icon="el-icon-cloudy" @click="upload">
      上传头像
      </el-button>
      

      封装API方法 (api/user.js)： ```javascript // 更换头像 export const uploadAPI = base64 => { // return request.put(‘/my/userinfo’, 请求体) return request.patch(‘/my/update/avatar’, { avatar: base64 }) }

组件中，按需导入API方法
```javascript
import { uploadAPI } from '@/api/user'

组件中，给上传按钮，添加事件：@click="upload"，对应的方法如下：

async upload() {
  // 上传方法
  const { data: res } = await uploadAPI(this.url)
  if (res.code === 0) {
    this.$message.success(res.message)
    // 更新更改，调用 vuex 中的 actions 中的 getUser 方法，重新获取用户数据即可
    this.$store.dispatch('user/getUser')
  } else {
    this.$message.error(res.message)
  }
}