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

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


回答:

elementUI的el-upload组件应该是能完美满足你的需求的,https://element.eleme.io/#/zh...如何实现点击头像弹出选择图片窗口,点击图片上传头像成功呢?


回答:

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

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

多google吧


回答:

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

https://codepen.io/pantao/pen...

HTML:

<div class="avatar">

<img src="https://avatars.githubusercontent.com/u/463704?v=4" alt="如何实现点击头像弹出选择图片窗口,点击图片上传头像成功呢?" 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);

})

以上是 如何实现点击头像弹出选择图片窗口,点击图片上传头像成功呢? 的全部内容, 来源链接: utcz.com/p/936225.html

回到顶部