FileReader的实际应用——用户头像上传

在最初学习FileReader的时候，了解到此API可以用来读取上传的图片信息进行图片预览，也可读取txt文件，但不清楚在实际项目中有什么应用，直到我需要修改用户头像时。。。
基本的用法可参考：FileReader()读取文件
接下来说说在上传用户头像时如何使用。

• 首先是页面展示

 <el-avatar :size="80" :src="userInfo.avatorUrl" class="avator"></el-avatar>
 <div class="imgbtn" @click="chooseImg"></div>
 <input type="file" class="upload" accept="image/*" @change="handleImg(getImgUrl)">

• 使用fileReader实现上传

 chooseImg(){
    
    
 	document.getElementsByClassName('upload')[0].click()
 },
 handleImg(callback){
    
    
 	var fileReader = new FileReader()
    var file = document.getElementsByClassName('upload')[0]
    fileReader.readAsDataURL(file.files[0])
    fileReader.onload = function(){
    
    
    	//保存图片路径
   		callback(fileReader.result)
    }
},
getImgUrl(url){
    
    
	// console.log(url);
    this.userInfo.avatorUrl = url;    
}

其中el-avator用来展示头像，将imgbtn和el-avator重叠来实现点击用户触发input中上传图片的功能。
对于input的隐藏方法有三种，分别是opacity，display和visiblity，这里选择dispaly。因为另外两种方式在渲染树中仍然保留了input所占空间，对于项目样式方面可能会产生一些问题。