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>
思路分析:
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格式并上传预览头像”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
评论