javascript - 如果没有附件，表格将无法提交

Question

我有一个相对基本的 FormData 脚本，该脚本应该 POST 到 URL。当您实际将文件附加到表单时，它工作得很好，但是当尝试提交没有文件的表单时，它甚至不会发布，console.log 中的服务器没有错误。我希望这只是我错过的一些非常明显的事情。如有任何帮助，我们将不胜感激。

这是脚本

window.addEventListener("DOMContentLoaded", function() {
var form = document.getElementById("my-form");
form.addEventListener("submit", function(event) {
    event.preventDefault();

    var payload = {};

    var data = new FormData(form);
    for(var [key, value] of data.entries()) {
        if(typeof(value) === 'object') {
            payload[key + '_name'] = value.name;
            payload[key + '_type'] = value.type;

            var reader = new FileReader();
            reader.readAsDataURL(value);

            payload[key] = reader;
            continue;
        }

        payload[key] = value;
    }

    if(payload.hasOwnProperty('attachment')) {
        // If there is an attachment, wait for it to load then send
        payload['attachment'].onload = function(evt) {
            payload['attachment'] = reader.result;
            postToEndPoint(payload);
        };
    } else {
        postToEndPoint(payload);
    }
});
});

function postToEndPoint(payload) {
payload = JSON.stringify(payload);
console.log(payload);

var url = 'https://'; // pretend actual endpoint URL is here
var req = new XMLHttpRequest();

req.open('POST', url, true);
req.onreadystatechange = function () {
    if(req.readyState == XMLHttpRequest.DONE && req.status == 200) {
        console.log(req);
    }
};
req.send(payload);
}

这是一个基本的框架示例:

<form id="my-form" action="" method="POST">
<label for="email">Email</label> 
<input maxlength="80" name="email" size="20" type="email" required>
<input accept=".pdf,.jpg,.jpeg,.png" name="attachment" type="file">
<input name="submit" type="submit" value="submit">
</form>

Answer 1

即使没有附加任何内容，您也在等待附件加载。

   if(typeof(value) === 'object') {

        if (!value.name) continue; //Add this

        payload[key + '_name'] = value.name;
        payload[key + '_type'] = value.type;

        var reader = new FileReader();
        reader.readAsDataURL(value);

        payload[key] = reader;
        continue;
    }