在最初学习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所占空间,对于项目样式方面可能会产生一些问题。