当前位置：网站首页>JS实现点击头像上传图片修改

JS实现点击头像上传图片修改

2022-04-22 06:11:00 【sunshine641】

只贴关键代码部分：

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)               
    },
}

 

版权声明
本文为[sunshine641]所创，转载请带上原文链接，感谢
https://blog.csdn.net/sunshine641/article/details/110533043

边栏推荐

猜你喜欢

随机推荐