修改用户头像,一般都会需要把图片转成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 {
Avatar: ''
}
},
methods: {
chooseImg () {
this.$refs.refIpt.click()
},
onIptChange (e) {
if (e.target.files.length === 0) {
this.Avatar = ''
} else {
const reader = new FileReader()
reader.readAsDataURL(e.target.files[0])
reader.onload = () => {
this.Avatar = reader.result
}
}
},
async upLoadAvatar () {
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)
this.$store.dispatch('initUserInfo')
}
}
}
</script>