使用 FormData 对象重新加载页面？

Question

当我将以下代码添加到类型为 submi 的事件侦听器中时，我的页面就会重新加载

await fetch('http://localhost:3000/upload', {
    method: 'POST',
    header: {
        'content-type': 'application/json',
    },
    body: formData,
});

当我删除它时，我的代码将继续以下代码，但否则，它将刷新。

这是为什么？有什么可以帮助您？

fourthForm.addEventListener('submit', async function(event) {
        event.preventDefault();
        
        const username = document.getElementById('username');
        const profileImage = document.getElementById('profilePicture');

        // store image in const. change name of image to date and time + "-" + username
        let image = profileImage.files[0];
        let date = Date.now();
        let ending = image.name.substring(image.name.lastIndexOf('.'), image.name.length);
        let imageName = username.value + ending;
        const formData = new FormData();
        formData.append('image', image, imageName);

        USER = {
            ...USER,
            username: username.value,
            image: date + "_" + imageName
        };

        console.log(USER);

        await fetch('http://localhost:3000/upload', {
            method: 'POST',
            header: {
                'content-type': 'application/json',
            },
            body: formData,
        });

        await fetch('http://localhost:3000/user', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(USER),
        });

        window.location.href = './index.html';
    });

这永远不会到达 /user 部分。只要我删除前面提到的部分。

这是我的控制台输出。翻译： 导航至网址。

Answer 1

您的问题可能与回调的异步性有关。确保默认事件不会在您的

.preventDefault

之前触发。无需使您的回调异步，您可以删除所有

async

和

await

关键字。我想这应该是这样的：

fourthForm.addEventListener('submit', (event) => {
        event.preventDefault();

        // store image in const. change name of image to date and time + "-" + username
        let image = profileImage.files[0];
        let date = Date.now();
        let ending = image.name.substring(image.name.lastIndexOf('.'), image.name.length);
        let imageName = username.value + ending;
        const formData = new FormData();
        formData.append('image', image, imageName);

        USER = {
            ...USER,
            username: username.value,
            image: date + "_" + imageName
        };

        console.log(USER);

        fetch('http://localhost:3000/upload', {
            method: 'POST',
            header: {
                'content-type': 'application/json',
            },
            body: formData,
        }).then(() => {
            fetch('http://localhost:3000/user', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(USER),
            }).then(() => {
                window.location.href = './index.html';
            })
        });
    });

也无需使用

document.getElementById

选择 ids。 Id 可以通过名称作为 JS 变量自动访问。