基于Vue实现头像选择预览
需求是点击头像这一栏可以弹出选择文件的弹出框。
1、首先添加一个input输入框,将其隐藏,设置一个accept属性,说明只选择图片,并且绑定ref属性方便原生dom操作
<input type="file" hidden accept="image/*" ref="fileRef">
2、在头像这一栏中添加一个点击事件,弹出选择文件的弹框
<van-cell
title="头像"
is-link
center
@click="$refs.fileRef.click()"
>
3、给input输入框绑定一个原生的change事件,当你选择的文件发生改变时触发。但是不满足需求,我的需求是只要选择了图片就触发,只需在代码中将你选中的图片的value值清空即可。
<input
type="file"
hidden
accept="image/*"
ref="fileRef"
@change="checkPic"
>
checkPic () {
console.log('选择了图片')
this.$refs.fileRef.value = ''
}
4、使用window.URL.createObjectURL()方法得到图片的URL地址,参考如下地址:
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
const blob =window.URL.createObjectURL(this.$refs.fileRef.files[0])
console.log(blob)
this.imgSrc = blob
5、最后将图片的src属性设置为blob地址即可显示你所选择的图片啦
<img :src="imgSrc" alt="">