如何实现点击头像弹出选择图片窗口？

Question

如何实现点击头像弹出选择图片窗口？

Answer 1

文件上传，找一下相关的UI库。

这个把文案去掉就能达到你要的效果吧。

Answer 2

input定位在img上面，input完全透明

Answer 3

测试使用：https://codepen.io/pantao/pen...

假设 HTML 结构如下：

<div class="avatar">
  <img src="https://avatars.githubusercontent.com/u/463704?v=4" alt="Avatar" id="avatar-image" />
</div>

CSS 样式：

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 3px;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

那么，可以通过下面这段代码实现上面的需求：

const pickImage = () => {
  // 我这里是返回了一个 Promise，也可以不使用 Promise，回调也可以
  return new Promise((resolve, reject) => {
    // 创建一个 input 元素
    const input = document.createElement('input');
    // 类型为 file，这样，当它点击的时候，就会打开文件选择框
    input.setAttribute('type', 'file');
    // 只接受图片文件，除了该限制，还可以加上数量限制等
    input.setAttribute('accept', 'image/*');
    // 监听 input 的 change 事件，将其 target.files 返回
    input.addEventListener('change', e => {
      console.log(e);
      resolve(e.target.files);
    });
    // 创建一个 MouseEvents
    const event = document.createEvent('MouseEvents');
    // 初始化事件为 `click` 事件
    event.initMouseEvent("click")
    // 在 input 上面触发该事件
    input.dispatchEvent(event);
  })
}

// 给 #avatar-image 添加 click 事件监听，点击之后，调用 pickImage() 方法取得文件
document.getElementById('avatar-image').addEventListener('click', async () => {
  const result = await pickImage();
  console.log(result[0].name);
})

如果是 Vue 项目的话，只需要将 pickImage 方法写进 methods 中，然后通过 <img @click="pickImage" /> 即可调用，并且还不需要返回 Promise，直接在 pickImage 里面延揽 e.target.files 即可。