使用 Fetch 在 Javascript 中发布表单数据 - 错误答案

【问题标题】：Posting Form Data in Javascript with Fetch - Bug使用 Fetch 在 Javascript 中发布表单数据 - 错误
【发布时间】：2021-12-19 21:49:46
【问题描述】：

首先我想提一下，我使用的是原生 Javascript 和 PHP，而不是 jquery。我在下面发布的代码只是一个片段。我没有在 javascript 中包含 PHP 文件或其他代码。

现在，我遇到的问题是，当我单击保存按钮并激活事件时，除了表单数据发布之外没有其他代码运行。我在事件开始和结束时有一个控制台日志来测试其他代码是否运行，但它永远不会运行。表单数据（在本例中为图片）被发布到 PHP REST API 文件并按原样存储在一个文件夹中，但我没有收到来自它发布到的 PHP 文件的 JSON 响应，这是我最大的问题是在 javascript 代码的情况下，除了 post 请求之外没有其他代码运行。 console.logs（测试 1 和测试 2）都不会出现。

当我使用任何其他类型的数据（例如 JSON）测试发布请求时，一切正常。事件中的所有代码都会运行，我可以从发出请求的同一个 PHP 文件接收 JSON 格式的响应。发布表单数据会导致此错误。我希望我已经足够清楚地解释了这一点。感谢您的帮助。

save_bg_btn.addEventListener('click', save_background_picture);

async function save_background_picture(){

    console.log("test 1");

    const formData = new FormData();
    const save_files_background_pic = file_bg_pic.files[0];
    const url = 'http://localhost/test/background-cover.php';

    formData.append("file_bg_pic", save_files_background_pic);

    await post_formdata_request(url, formData)
        .then(data =>{ 
            console.log(data);
        })
        .catch(err => console.log(err));
    
     console.log(test 2);

}


function post_formdata_request(url, formData){

    return new Promise((resolve, reject) => {
        
        fetch(url, {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(data => resolve(data))
        .catch(err => reject(err));
    });
}

【问题讨论】：

标签： javascript php fetch

【解决方案1】：

假设此按钮位于form 中，我认为您需要为单击事件添加preventDefault()，否则表单将提交并刷新页面。另外，修复第二个console.log，因为那会破坏我的测试，直到我也注意到它。


async function save_background_picture(e){
    e.preventDefault();
    
    // ...rest of the code

    console.log("test 2");  // <--- needed quotes
}

【讨论】：

你好。感谢你的回复。是的，我需要添加引号，但不幸的是，这仍然不能解决我遇到的问题。使用 fetch 发布表单数据时，不会在事件中运行其他代码。我创建了一些示例文件来显示问题。我会将它们作为答案发布在此线程中。
我发现每当我发布 FormData 时，页面实际上都会刷新。问题是即使使用 event.preventDefault() 也会刷新。
那么，您发布的 exact 示例代码有问题吗？我还没有尝试过 PHP 端，但 JS 似乎工作正常。在这里，jsfiddle.net/myg5sowu，两条日志行运行并且页面没有刷新。
是的，我仍然遇到问题。我单击了您发布的链接并测试了该代码，它的工作方式与我期望的代码完全一样，但是当我在 MS VS Code 中测试代码时它不起作用。页面刷新。诡异的。也许我的 IDE 甚至计算机有问题？
有什么方法可以用 PHP 文件测试代码，看看有没有错误？

【解决方案2】：

html 文件：test-fetch.html

<!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>
</head>

<body>
    <form id="myForm">
        <input type="file" id="inpFile">
    </form>
</body>

<script>

    const inpFile = document.getElementById('inpFile');
    const myForm = document.getElementById('myForm');

    myForm.addEventListener('change', inpFunction);

    async function inpFunction(e){
        e.preventDefault();

        const endpoint = "http://localhost/php-practice/test-fetch.php";
        const formData = new FormData();
        
        formData.append('inpFile', inpFile.files[0]);

        fetch(endpoint, {
            method: 'post',
            body: formData
        })
        .catch(err => console.log(err));
    }
</script>
</html>

这是 php 文件：test-fetch.php

<?php

    $file = $_FILES['inpFile'];

    $fileName = $_FILES['inpFile']['name'];
    $fileTmpName = $_FILES['inpFile']['tmp_name'];
    $fileSize = $_FILES['inpFile']['size'];
    $fileError = $_FILES['inpFile']['error'];
    $fileType = $_FILES['inpFile']['type'];

    $fileExt = explode('.', $fileName);
    $fileActualExt = strtolower(end($fileExt));

    $allowed = array('jpg', 'jpeg', 'png', 'pdf');
    if(in_array($fileActualExt, $allowed)){
        if($fileError === 0){
            if($fileSize < 2000000){
                $fileNameNew = uniqid('', true).".".$fileActualExt;

                $fileDestination = 'images/'.$fileNameNew;

                move_uploaded_file($fileTmpName, $fileDestination);
            }else{
                echo "Your file is too large!";
            }
        }else{
            echo "There was an error uploading your file!";
        }
    }else{
        echo "You cannot upload files of this type!";
    }

    echo 'Success';
?>

现在，如果您在函数“inpFunction”中添加任何其他代码，例如控制台日志，它将不会运行。唯一会运行的代码是将表单数据发送到 php 文件的 fetch。这个问题真的让我很困惑。

编辑：php 文件需要一个名为“images”的文件夹，因为这是发布的任何图片的路径目的地。

【讨论】：