如何向服务器传递含CSV（ArrayBuffer）的复杂JSON负载？

方案1：使用FormData（推荐） #

这是文件上传场景的标准解决方案，既能完整保留文件二进制数据，又能携带所有关联元信息，兼容性拉满，后端处理也成熟。

具体操作：

• 先把ArrayBuffer转成Blob（FormData仅接受Blob/File类型的文件数据）
• 创建FormData实例，逐个添加顶层元数据和文件的关联信息，用结构化键名方便后端识别

代码示例：

// 假设你已经拿到了CSV的ArrayBuffer
const csvBuffer = ...; 
const csvBlob = new Blob([csvBuffer], { type: 'text/csv' });

const formData = new FormData();
// 添加顶层的name和description
formData.append('name', '');
formData.append('description', '');

// 添加第一个文件的所有信息
formData.append('files[0][file]', csvBlob, 'test_CSV.csv');
formData.append('files[0][file_name]', 'test_CSV.csv');
formData.append('files[0][file_type]', 'text/csv');
formData.append('files[0][table_name]', 'test_CSV');
formData.append('files[0][file_size]', 1801440);

// 发送请求，无需手动设置Content-Type，浏览器会自动处理
fetch('/your-upload-api', {
  method: 'POST',
  body: formData
});

后端不管用Node.js（multer）、Python（Flask-WTF）还是Java（Spring），都有现成工具能直接解析FormData，轻松拿到文件和对应元数据。

方案2：将ArrayBuffer转Base64嵌入JSON #

如果后端更习惯接收JSON格式，小文件可以用这个方法——把二进制数据转成Base64字符串，这样JSON序列化时不会丢失信息。缺点是Base64会让数据体积增加约30%，大文件不建议用。

代码示例：

// ArrayBuffer转Base64字符串的工具函数
function arrayBufferToBase64(buffer) {
  const bytes = new Uint8Array(buffer);
  let binary = '';
  for (let i = 0; i < bytes.length; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary);
}

const csvBuffer = ...;
const csvBase64 = arrayBufferToBase64(csvBuffer);

// 构造完整的JSON负载
const payload = {
  "name": "",
  "description": "",
  "files": [
    {
      "file_name": "test_CSV.csv",
      "file_type": "text/csv",
      "table_name": "test_CSV",
      "file_size": 1801440,
      "binary": csvBase64
    }
  ]
};

// 发送JSON请求
fetch('/your-upload-api', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(payload)
});

后端收到后需要把Base64字符串转回二进制，比如Node.js用Buffer.from(csvBase64, 'base64')，Python用base64.b64decode(csvBase64)。

方案对比 #

• FormData：大文件首选，无额外体积开销，后端解析成熟，是行业通用方案。
• Base64+JSON：适合小文件，无需后端调整解析逻辑，但传输效率更低。

内容的提问来源于stack exchange，提问作者ksusha-beep