今天小编给大家分享一下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格式并上传预览头像”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
