先看页面效果:
实现功能:点击上传头像按钮可上传头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 6px;
padding: 0;
}
img {
width: 200px;
height: 200px;
border-radius: 50%;
background: pink;
display: block;
margin: 0 auto;
}
div {
display: flex;
align-items: center;
justify-content: center;
}
label {
border: 1px solid #ccc;
background: #eee;
border-radius: 4px;
padding: 6px;
cursor: pointer;
}
input {
display: none;
}
</style>
</head>
<body>
<img src="" alt="">
<div>
<!--
label标签只是起到样式好看的作用,不能完全替代input标签,
但是点击了label标签就是点击了input标签,因为label标签的for和input标签的id一致。
但是上传头像的chang事件依然是绑定在input标签上
-->
<label for="prew">上传头像</label>
<input type="file" name="my" id="prew">
</div>
</body>
</html>
<script src="./axios.min.js"></script>
<script>
document.querySelector('input').addEventListener('change', e => {
// 因为后台需要 application/form-data 的内容类型,所以前台需要传FormData给后台
// 创建FormData对象
const data = new FormData();
data.append("avatar", e.target.files[0]);
data.append("creator", "hello");
axios({
url: 'http://hmajax.itheima.net/api/avatar',
method: 'PUT',
data
}).then(res => {
const avatar = res.data.data.avatar;
document.querySelector('img').src = avatar;
// 确保刷新页面头像仍在存在
localStorage.setItem('avatar', avatar);
})
})
// 刷新页面,重新设置头像
document.querySelector('img').src = localStorage.getItem('avatar');
</script>