摘要
本文主要介绍了js利用FileReader实现图片转base64格式并上传预览头像,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
目录
- 页面布局:
- 思路分析:
- 代码:
修改用户头像,一般都会需要把图片转成base64格式,所以我们需要学会怎么利用FileReader转换
页面布局:
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>更换头像</span>
</div>
<div>
<!-- 图片,用来展示用户选择的头像 -->
<img : alt="" style="width:350px;" v-if="Avatar"/>
<img class="lazy" 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改变事件
- 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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.adminjs.cn!