xmlhttprequest - 从 XMLHttpRequest 对象响应创建文件

Question

首先，如果我要说的没有任何意义，请允许我道歉。我已经离开了我的舒适区，我真的不知道我在做什么。照这样说...

我正在使用 Google Drive File Picker library允许用户从他们的 Google Drive 上传他们的简历。

function downloadGDriveFile(file) {
    if (file.downloadUrl) {
        var accessToken = gapi.auth.getToken().access_token;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', file.downloadUrl);
        xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
        xhr.onload = function () {
            var content = xhr.response;
            console.log(xhr);

            form_element = document.getElementById("new_guest_application");
            form_data = new FormData(form_element);
            new_file = new File([content], file.title, {type: file.mimeType});
            form_data.append('guest_application[curriculum_vitae]', new_file);
            console.log(new_file);

            var request = new XMLHttpRequest();
            request.open("POST", form_element.action);
            request.send(form_data);

        };
        xhr.onerror = function () {
            alert('Download failure.');
        };
        xhr.send();
    }
    else {
        alert('Unable to download file.');
    }
}

使用上面的代码，我接受选择的 file对象并使用它以及相关的 header token 来下载 content的文件。这似乎按预期工作。

当我试图将所述内容转换为 File 时，我的问题就出现了。用于附加到表单并提交到我的服务器。

上面的代码有效，只要文件被服务器接受并相应地上传，但所述文件已损坏。我想这是因为我做错了 file = new File([content], file.title, {type: file.mimeType});行，但我离我的舒适区太远了，我什至不知道从哪里开始。

(我通常不会做太多的 JavaScript，并且只是通过大量的复制/粘贴试验和错误才能做到这一点)

有人可以帮我吗？谢谢。

Answer 1

xhr.response将返回一些根据 xhr.responseType 中定义的数据类型格式化的数据.
如果你一个携带二进制数据，和responseType设置为文本类型，您的数据将被破坏。

您可以尝试覆盖 xhr.responseType就在阅读回复之前

xhr.responseType = "arraybuffer";
var content = xhr.response;