页面布局

<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>

本地图片预览

找到文件域（文件选择框） ---- <Input type="file" />
input.files 表示选择的文件列表
input.files.length 表示选择了几张图片
input.files[0] 表示第一张图片的 文件对象。

使用URL对象做预览

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

let url = URL.createObjectURL(文件对象)

设置图片的 src 为临时的url地址

img.src = url

更换头像

点击按钮能选择图片

希望选择图片，必须有一个 <input @click="clickFile" type="file" ref="file" >，所以在页面中，加入这个文件选择框。

点击”选择图片的时候，设置单击事件”：

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的有无，设置预览图片：

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

上传图片

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

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

接下来，封装API方法导入

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

扫描二维码关注公众号，回复： 15068786 查看本文章

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)
  }
}

更换头像预览与上传