java修改头像代码_用户修改头像功能

项目中需要进行用户头像的上传，并且还有预览功能，因为我的项目用的是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上传文件按钮

}

最后得出的效果是：