项目中需要进行用户头像的上传，并且还有预览功能，因为我的项目用的是vue的框架，因此留下作为备份，希望有需要的人可以参考。
页面代码：
html
上传个人照片
data
imageUrl: require('./img/upload.png') // 定义imageUrl默认图片路径
js
// 打开上传功能
uploadHeadImg() {
this.$el.querySelector('.hiddenInput').click();
},
// 将头像显示
handleFile(e) {
let $target = e.target || e.srcElement
let file = $target.files\[0\]
let reader = new FileReader()
reader.onload = (data) => {
let res = data.target || data.srcElement
this.imageUrl = res.result
}
reader.readAsDataURL(file);
}
css
.upload{
cursor: pointer;
width: 170px;
text-align: center;
display: inline-block;
}
.upload p{
margin-top: 10px;
}
.hiddenInput{
display: none; // 隐藏input上传文件按钮
}
最后得出的效果是：
