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

今天小编给大家分享一下js怎么利用FileReader实现图片转base64格式并上传预览头像的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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

页面布局:

<template>  <el-card class="box-card">    <div slot="header" class="clearfix">      <span>更换头像</span>    </div>    <div>      <!-- 图片，用来展示用户选择的头像 -->      <img :src="Avatar" alt=""   v-if="Avatar"/>      <img src="../../../assets/images/avatar.jpg" alt=""  v-else />      <!-- 按钮区域 -->      <div class="btn-box">        <input type="file"  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>

思路分析:

• 点击button按钮触发input的点击事件,所以需要给input设置ref拿到Dom

• 给input设置change改变事件

• 1设置一个变量接收转换的数据

• 2拿到事件目标,里面有个方法e.target.files是个伪数组.通过e.target.files.length判断用户是否选择了图片

• 3通过new FileReader拿到一个实例

• 4通过 实例名.readAsDataURL 将图片转成base64格式

• 5onload可以监听转换完成后/给声明变量赋值

• 点击上传按钮发送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格式并上传预览头像”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。