js利用FileReader实现图片转base64格式并上传预览头像

修改用户头像,一般都会需要把图片转成base64格式,所以我们需要学会怎么利用FileReader转换

页面布局:

<template>
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>更换头像</span>
  </div>
  <div>
    <!-- 图片，用来展示用户选择的头像 -->
    <img :src="Avatar" alt="" style="width:350px;"  v-if="Avatar"/>
    <img src="../../../assets/images/avatar.jpg" alt=""  v-else />

    <!-- 按钮区域 -->
    <div class="btn-box">
      <input type="file" style="display:none;" ref="refIpt" @change="onIptChange">
      <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button>
      <el-button type="success" icon="el-icon-upload" :disabled="Avatar===''"  @click="upLoadAvatar">上传头像</el-button>
    </div>
  </div>
</el-card>
</template>

思路分析:

• 1.点击button按钮触发input的点击事件,所以需要给input设置ref拿到Dom
• 2.给input设置change改变事件
  • 2.1设置一个变量接收转换的数据
  • 2.2拿到事件目标,里面有个方法e.target.files是个伪数组.通过e.target.files.length判断用户是否选择了图片
  • 2.3通过new FileReader拿到一个实例
  • 2.4通过 实例名.readAsDataURL 将图片转成base64格式
  • 2.5onload可以监听转换完成后/给声明变量赋值
• 3.点击上传按钮发送axios/上传成功重新请求用户信息实现信息刷新

代码:

<script>
export default {
name: 'UserAvatar',
data () {
  return {
    // 声明一个变量存储转好的base64进制
    Avatar: ''
  }
},
methods: {
  // 点击button触发input点击事件
  chooseImg () {
    this.$refs.refIpt.click()
  },
  // input内容改变事件
  // e拿到事件对象
  onIptChange (e) {
    // e.target.files是个伪数组/可以通过长度判断用户是否选择了图片
    if (e.target.files.length === 0) {
      // 点击了取消了,就恢复默认图片
      this.Avatar = ''
    } else {
      // FileReader 浏览器提供的方法
      const reader = new FileReader()
      // reader里面有个方法readAsDataURL 可以将图片转base64进制
      reader.readAsDataURL(e.target.files[0])
      // onload可以监听转换完成后
      reader.onload = () => {
      // 给声明变量赋值
        this.Avatar = reader.result
      }
    }
  },
  // 点击上传头像
  async  upLoadAvatar () {
    // 发送axios 上传
    const { data: res } = await this.$http.patch('/my/update/avatar', { avatar: this.Avatar })
    // 判断业务状态码是否上传成功给出提示
    if (res.code !== 0) return this.$message.error(res.message)
    console.log(res)
    this.$message.success(res.message)
    // 上传成功发送重新发送axios获取最新用户信息
    this.$store.dispatch('initUserInfo')
  }
}

}
</script>

关于js利用FileReader实现图片转base64格式并上传预览头像的文章就介绍至此，更多相关js FileReader 图片转base64内容请搜索编程宝库以前的文章，希望以后支持编程宝库！

vue-cli 的最新版本是5.0.4首先需要全局安装 vue-cliyarn global add @vue/cli已经安装的可以升级到最新版yarn global upgrade --lates ...