vue实现头像预览功能

一个小记录。
下面的html是使用了element-ui实现具体样式，但是选取图片文件需要用原生的input框。原生的样式很难修改，就可以将原生的input框隐藏起来，用elbutton触发原生的input框的click事件。

<el-form-item label="头像预览">
  <!-- 显示初始的图片 -->
  <img src="@/assets/cover.jpg" alt="" class="cover-img" ref="imgRef" />
  <br />
  <!-- 文件选择框，默认被隐藏 -->
  <input type="file" style="display: none;" accept="image/*" ref="iptFileRef" @change="changeCover"/>
  <!-- 选择封面的按钮 -->
  <el-button type="text"  @click="selCover">+ 选择封面</el-button>
</el-form-item>

    selCover(){
        this.$refs.iptFileRef.click()
    },
    changeCover(e){
        // console.log(e.target.files[0])
        const files=e.target.files
        if(files.length===0){
            this.pubForm.cover_img=null
        }else{
            this.pubForm.cover_img=files[0]
        }
    }