图片上传语法

图片上传

步骤

 <!-- 文件选择元素 -->
    <input type="file" class="upload"><br>
    <!-- 上传的图片出于安全不能使用url使用，智能做背景使用 -->
    <img src="" alt="">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 目标，图片上传，显示到网页上
        // 1.获取图片文件
        // 2.使用FormData携带图片文件
        // 3.提交到服务器，获取图片url地址使用
        document.querySelector('.upload').addEventListener('change', e => {
            // 文件上传按钮，选择的文件会保存在事件对象中
            // 1.获取选择的图片资源
            console.log('', e.target.files[0]);
            // 调用接口上传数据 form-data数据格式
            const fd = new FormData()
            //form-data数据必须使用fd('键'，值)的格式追加属性
            fd.append('img', e.target.files[0])
            // console.log('',fd);无法使用console.log()打印数据，智能使用for(let k in fd)循环的方式
            axios({
                url: 'http://hmajax.itheima.net/api/uploadimg',
                method: 'POST',
                data: fd
            }).then(res => {
                console.log(res);
                document.querySelector('img').src = res.data.data.url
            })


        })
    </script>