Javascript 在 xhttp POST 请求中发送带有 zip 文件的元数据

Question

我需要上传包含标题和特定编号等元数据的 zip 文件。

要么我直接发送 zip 文件:

function generalPostRequest(content, url, cb) {    
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", url, true);
    xhttp.withCredentials = true;
    xhttp.setRequestHeader("Authorization", "Basic " + btoa("NAME:PASS"));

    //DIFF
    xhttp.setRequestHeader("Content-Type", "application/zip");
    //DIFF

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState === 4 && xhttp.status === 200) {
            if (cb) {
                cb(JSON.parse(xhttp.response));
            }
        }
    };
    xhttp.send(content);//DIFF
}

但是我不知道如何添加元数据。另一种方式是:

function generalPostRequest(content, url, cb) {
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", url, true);
    xhttp.withCredentials = true;
    xhttp.setRequestHeader("Authorization", "Basic " + btoa("NAME:PASS"));

    //DIFF
    xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    var params = JSON.stringify(content);
    //DIFF

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState === 4 && xhttp.status === 200) {
            if (cb) {
                cb(JSON.parse(xhttp.response));
            }
        }
    };
    xhttp.send(params);//DIFF
}

但是如果我将 zip 添加到数组中，JSON.stringify 函数会删除 zip 文件。我可能必须将其转换为字节数组。

如何将元数据添加到解决方案 1 或如何将 zip 转换为解决方案 2 中的字节数组？

Answer 1

我还没有真正测试过这个，因为我不知道到底是什么类型的值 content成立，无论如何都很难构造一个合适的测试用例。

您正尝试在一个请求中发送一个 JSON 文件和一个 Zip 文件。方法是使用多部分请求。

XMLHttpRequest可以从 FormData 构建多部分请求对象。

您只需要创建一个并为其提供正确的数据。

var zip_data = get_zip_data();
var json_data = get_json_data();

var zip_file = new File(zip_data, "example.zip", { type: "application/zip" });
var json_file = new File(json_data, "example.json", { type: "application/json" });

var form_data = new FormData();
form_data.append("zip", zip_file, "example.zip");
form_data.append("json", json_file, "example.json");

var xhttp = new XMLHttpRequest();
xhttp.open("POST", url);
xhttp.withCredentials = true;
xhttp.setRequestHeader("Authorization", "Basic " + btoa("NAME:PASS"));
xhttp.addEventListener("load", load_handler);
xhttp.send(form_data);

function load_handler() {
    if (cb) {
        cb(JSON.parse(xhttp.response));
    }
}

请注意，您不得设置 Content-Type header 。 XHR 将从 FormData 生成它自动对象(它必须这样做，因为它需要在文件之间生成边界标记)。

这应该会导致这两个文件被发送到服务器，就像您使用 <input type="file"> 选择它们一样。以常规形式。相应地编写服务器端代码(例如，如果您使用的是 PHP，则使用 $_FILES；如果您使用的是 Node.js，则使用类似 multer 的东西)。