有时候我们在碰到长传头像这种功能,而后端需要的是base64格式的字符串,这个时候就需要我们基于 FileReader 把文件读取为 base64 的字符串。掌握好三步OK。
1. 创建 FileReader 对象
const fr = new FileReader()
2. 调用 readAsDataURL 函数,读取文件内容
fr.readAsDataURL(files[0])
3. 监听 fr 的 onload 事件,通过 e.target.result 获取到读取的结果,值是字符串(base64 格 式的字符串)
fr.onload = e => {
this.avatar = e.target.result
}
result打印出来就是base64字符串
代码如下
onIptchange (e) {
// console.dir(e.target)
if (e.target.files.length === 0) {
// 没有选择图片
} else {
// 将图片转成base64 发送给后台
// 1.new FileReader() 文件读取器
const reader = new FileReader()
// 2.读取图片对象
reader.readAsDataURL(e.target.files[0])
// 3.监听onload文件读取完毕事件
reader.onload = () => {
// console.log(reader.result)
// 头像预览
this.avatar = reader.result
}
}
}