用户修改头像功能

项目中需要进行用户头像的上传，并且还有预览功能，因为我的项目用的是vue的框架，因此留下作为备份，希望有需要的人可以参考。

页面代码：

html

<div class="upload" @click="uploadHeadImg">  
 <img :src="imageUrl" />  
 <input type="file" accept="image/\*" @change="handleFile" class="hiddenInput"/>  
 <p>上传个人照片</p>  
</div>

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上传文件按钮
}

最后得出的效果是：