30、js - 上传头像 - 代码天地

先看页面效果：
实现功能：点击上传头像按钮可上传头像
<!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>
30、js - 上传头像

猜你喜欢
