[英]Javascript send metadata with zip file in xhttp POST request
我需要上传带有元数据(如标题和特定数字)的 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 或如何在解决方案 2 中将 zip 转换为字节数组?
我还没有实际测试过这个,而且由于我不知道究竟包含什么样的价值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 标头。 XHR 将自动从FormData
对象生成它(它必须这样做,因为它需要在文件之间生成边界标记)。
这应该会导致这两个文件被发送到服务器,就像您使用<input type="file">
以常规形式选择它们一样。 相应地编写服务器端代码(例如,如果您使用的是 PHP,则使用$_FILES
或使用 Node.js 的类似 multer 的代码)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.