如何使用window.open实现与axios POST请求等效的功能并传递FormData数据？

嘿，我懂你的需求！之前用axios发送带FormData的POST请求一切正常，现在想换成用window.open打开新窗口的同时把这些POST数据传过去对吧？

其实window.open本身默认是发起GET请求的，没法直接携带FormData这类POST数据，但我们可以用一个实用的小技巧来实现——动态创建一个隐藏的HTML表单，用这个表单来提交POST数据，并且指定表单的提交目标为你打开的新窗口。这样就能达到和axios POST请求一样的效果，同时在新窗口里展示接口返回的内容啦！

结合你原来的代码，我给你写一个完整的实现示例：

// 1. 先打开一个空白的新窗口，记得保存引用，窗口名称要和后面表单的target一致
window.myWin = window.open('', "mywin", 'status=yes,width=800,height=600');

// 2. 动态创建表单元素
const form = document.createElement('form');
form.action = '/myapi'; // 你的接口地址
form.method = 'POST';
form.target = 'mywin'; // 对应window.open的第二个参数，指定提交到这个新窗口
form.enctype = 'multipart/form-data'; // 必须设置这个，因为要上传文件和FormData

// 3. 把你原来FormData里的内容转成表单控件添加进去
// 处理metadata参数
const metadataInput = document.createElement('input');
metadataInput.type = 'hidden';
metadataInput.name = 'metadata';
metadataInput.value = JSON.stringify(export_param);
form.appendChild(metadataInput);

// 处理文件Blob（用DataTransfer设置FileList，更符合标准）
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.name = 'file';
const dataTransfer = new DataTransfer();
// 把Blob转成File对象（部分后端框架更适配File类型）
const file = new File([blobData], 'exported-image.png', { type: blobData.type });
dataTransfer.items.add(file);
fileInput.files = dataTransfer.files;
form.appendChild(fileInput);

// 👉 如果你已经有现成的formData对象，推荐用遍历方式，适配所有参数类型：
// for (const [key, value] of formData.entries()) {
//   if (value instanceof File || value instanceof Blob) {
//     // 处理文件/Blob类型
//     const fileInput = document.createElement('input');
//     fileInput.type = 'file';
//     fileInput.name = key;
//     const dataTransfer = new DataTransfer();
//     const file = value instanceof File ? value : new File([value], `${key}.bin`, { type: value.type });
//     dataTransfer.items.add(file);
//     fileInput.files = dataTransfer.files;
//     form.appendChild(fileInput);
//   } else {
//     // 处理普通文本参数
//     const input = document.createElement('input');
//     input.type = 'hidden';
//     input.name = key;
//     input.value = value;
//     form.appendChild(input);
//   }
// }

// 4. 临时把表单添加到页面，提交后再移除
document.body.appendChild(form);
form.submit();
// 延迟移除表单，确保提交操作完成
setTimeout(() => {
  document.body.removeChild(form);
}, 100);

还有几个需要注意的小细节：

• 浏览器的弹出阻止器可能会拦截新窗口，最好把window.open放在用户点击事件的回调里触发，这样不容易被拦截；
• 确保你的后端接口能正确处理POST请求，并且返回的内容可以在新窗口中正常展示（比如HTML、下载文件等）；
• 如果你用遍历FormData的方式，能自动适配所有参数类型，不管是文本还是文件，通用性更强。

备注：内容来源于stack exchange，提问作者whitebear