只贴关键代码部分:
input的样式设为隐藏 ,就不会出现选择文件的按钮 ;事件handlefile来处理上传图片
img 点击事件根据其id绑定input的点击事件 ,这样点击图片即点击input选择图片 ; :src这里是在动态加载路径 ,不需要的直接 src=“” 就好
<input type="file" id="f" accept="image/*" @change="handleFile" class="hiddenInput" style="display:none"/>
<img id="img" class="avatarImg" :src="this.avatar" onclick="f.click()">
JS代码: (我这里是用vue写的,只实现前端部分;要上传到后端,需要再加传到数据库的代码 )
methods:{
// 打开图片上传
uploadHeadImg: function () {
this.$el.querySelector('.hiddenInput').click() //绑定input的类名
},
// 将头像显示
handleFile: function (e) {
let $target = e.target || e.srcElement
let file = $target.files[0]
var reader = new FileReader() //创建文件阅读器实例
reader.onload = (data) => {
let res = data.target || data.srcElement
this.avatar = res.result
}
reader.readAsDataURL(file)
},
}