基于Vue实现头像选择预览

基于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="">