直接调用时 XMLHttpRequest 属性为空答案

【问题标题】：XMLHttpRequest attributes are empty when called directly直接调用时 XMLHttpRequest 属性为空
【发布时间】：2018-10-17 14:50:32
【问题描述】：

我正在通过表单和 XMLHttpRequest 将文件上传到我的服务器。我用来执行此操作的相关代码如下。

async function POST_upload (html_form_id, url) {
    const form = document.getElementById(html_form_id);
    const multiple_files = form.querySelector("input[type=file]");

    if (multiple_files.files.length) {
        const request = new XMLHttpRequest();

        const formData = Array.prototype.reduce.call(
            multiple_files.files,
            function (formData, file) {
                formData.append(multiple_files.name, file);
                return formData;
            },
            new FormData()
        );

        request.open("POST", url);
        request.setRequestHeader("X-Requested-With", "XMLHttpRequest");

        request.upload.addEventListener(
        "progress",
        function(event) {
            /* Progress happened. */
        },
        false);

        request.upload.addEventListener(
        "load",
        function(event) {
            /*
                Upload completed successfully.
            */

            console.log(request);
            console.log(request.readyState);
            console.log(request.response);
            console.log(request.responseText);
        },
        false);

        request.upload.addEventListener(
        "loadend",
        function(event) {
            /*
                Upload completed.
                Alway triggers, no matter if the upload was successful or not.
            */
        },
        false);

        request.upload.addEventListener(
        "abort",
        function(event) {
            /*
                Upload was aborted by user.
            */
        },
        false);

        request.upload.addEventListener(
        "error",
        function(event) {
            /*
                Upload was aborted by an error.
            */
        },
        false);

        request.send(formData);
    }
};

document.getElementById("upload_form").addEventListener("change", function(event) {
    POST_upload("upload_form", "/weather/ajax/upload/");
});

上传工作正常，我得到的响应是一个 JSON 格式的字符串，其中包含我刚刚上传的文件的详细信息。

当我现在尝试读取 load 事件中的 request 对象并将其打印到控制台时，一切都按预期显示。正如您在绿色框中看到的，所有属性都填充了正确的信息。

但是，如果我随后尝试将该请求对象的 readyState、response 或 responseText 打印到控制台（红框），readyState突然从4变为1，response和responseText都是空的。

我怀疑对象的内容在我读取对象和它的属性之间可能会发生某种变化，所以我在 console.log( request.responseText)，但属性又在那里了。

所以我的问题是......为什么我似乎无法在这里访问请求对象的属性？这似乎有点奇怪。

【问题讨论】：

标签： javascript file-upload xmlhttprequest

【解决方案1】：

我解决了这个问题。问题是上传的结束不是请求的结束。我听错了事件。

将 request.upload.addEventListener("load", ...) 更改为 request.addEventListener("load", ...) strong> 解决了这个问题。

【讨论】：