如何在 JavaScript 前端正确拼接二进制文件与元数据并发送至后端_技术教程

本文详解如何避免 javascript 将

file 对象错误转为 "[object file]" 字符串，通过 filereader + textencoder + uint8array 统一处理二进制数据，实现安全、可控的多文件+元信息上传。

在前端向服务端传输文件时，若试图对 File 对象直接使用字符串拼接（如 file.fileData + "---"），JavaScript 会隐式调用其 toString() 方法，结果恒为 "[object File]"——这并非 bug，而是规范行为：File 继承自 Blob，本身不可被字符串化为二进制内容。

要真正拼接原始二进制数据与自定义分隔符（如文件名、大小等元信息），必须全程保持二进制类型一致性：所有片段都需转换为 ArrayBuffer 或 Uint8Array，再合并为单一 Blob。

✅ 正确做法：全链路二进制处理

读取文件为 ArrayBuffer
使用 FileReader.readAsArrayBuffer() 异步读取每个 File，返回原始字节流：

function readAsBinary(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result); // ArrayBuffer
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}

编码元信息为 Uint8Array
使用 TextEncoder 将描述性字符串（如 ---------name---------size---------\n）转为字节序列，确保与二进制数据同构：
```
const fileInfo = `---------${files[index].fileName}---------${files[index].length}---------\n`;
const fileInfoBytes = new TextEncoder().encode(fileInfo); // Uint8Array
```

合并所有 Uint8Array 片段
利用扩展运算符拼接元数据与文件本体字节，并构造最终 Blob：

let combined = new Uint8Array(0);
binaryDataArray.forEach((arrayBuffer, i) => {
  const fileInfoBytes = new TextEncoder().encode(
    `---------${files[i].fileName}---------${files[i].length}---------\n`
  );
  const fileBytes = new Uint8Array(arrayBuffer);
  combined = new Uint8Array([...combined, ...fileInfoBytes, ...fileBytes]);
});

const blob = new Blob([combined], { type: 'application/octet-stream' });

发送请求（无需手动设 Content-Type）
fetch 会自动为 Blob 设置正确的 Content-Type（如 application/octet-stream），后端按原始字节流解析即可：
```
fetch('http://localhost:8000/upload', {
  method: 'POST',
  body: blob // 自动设置 Content-Type
});
```

⚠️ 注意事项

禁止混用类型：切勿将 File、String、ArrayBuffer 直接相加（+），JS 会强制类型转换导致 [object File]。
后端需按字节流解析：Kotlin 示例中当前用 BufferedReader.readText() 会破坏二进制（尤其含 \0 或非 UTF-8 字节），应改用 InputStream 逐字节读取或 Files.write() 直接保存：
```
val fileBytes = exchange.requestBody.use { it.readAllBytes() }
Files.write(Paths.get("DataBase/output.bin"), fileBytes)
```
分隔符设计建议：使用不易在文件内容中出现的标记（如长随机字符串），并在后端实现健壮的边界解析逻辑，避免误判。

✅ 总结

核心原则是：让所有参与拼接的数据都处于同一二进制抽象层（Uint8Array）。通过 FileReader 提取原始字节、TextEncoder 编码元信息、Uint8Array 统一合并，即可彻底规避 JavaScript 的隐式对象字符串化陷阱，实现可预测、可调试、符合底层协议的文件上传流程。