如何实现点击头像弹出选择图片窗口，点击图片上传头像成功呢？

Question

如何实现点击头像弹出选择图片窗口，点击图片上传成功呢？

Answer 1

elementUI的el-upload组件应该是能完美满足你的需求的，https://element.eleme.io/#/zh...

Answer 2

额.....提供个思路吧。默认在web端了。

点击头像，触发input type为file（也可指定文件后缀）的输入框focus，会弹出文件选择器的。监听onchange事件，拿到blob对象（即为文件）。上传该文件到服务器，然后更新用户信息。

多google吧

Answer 3

给你一个与 UI 框架无关的版本：

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;
}

JavaScript

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