js|Axios|图片Api上传|图片上传|js+Axios图片上传|项目图片上传|前端图片上传|Html图片上传

本文链接：https://blog.csdn.net/qq_35423410/article/details/125026362

js|Axios|图片Api上传|图片上传|js+Axios图片上传|项目图片上传|前端图片上传|Html图片上传

- 我不喜欢看废话直接上代码，拿去用吧，直接运行

我不喜欢看废话直接上代码，拿去用吧，直接运行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>上传图床Api</title>
</head>

<body>
    <form id="myForm">
        <input type="file" id="fileInput" name="file" accept="image/png, image/jpeg">
        <button id="uploadBtn" type="button">上传</button>
    </form>

    <div>
        <!-- 预览图片 -->
        <img src="" id="previewImg" width="200px">
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script>
        let myForm = document.getElementById('myForm');
        let fileInput = document.getElementById('fileInput');


        let previewImg = document.getElementById('previewImg');
        let uploadBtn = document.getElementById('uploadBtn');

        fileInput.addEventListener('change', function (e) {
            let file = this.files[0];
            previewImg.src = URL.createObjectURL(file);
        });

        uploadBtn.addEventListener('click', function () {
            let formData = new FormData(myForm);
            let file = fileInput.files[0];


            console.log(file);
            // 注意这里要将key命名为image，因为接口里边用的就是image这个名字
            formData.append('image', file);

            // 这里是重点
            axios({
                url: "https://www.imgtp.com/api/upload",
                method: "post",
                data: formData
            }).then(res => {
                console.log(res);
                let a = document.createElement('a');
                a.href = res.data.data.url;
                a.innerText = file.name;
                document.body.appendChild(a);
            })
        })
    </script>
</body>

</html>