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

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

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

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

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

1. 读取文件为 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);
     });
   }

2. 编码元信息为 Uint8Array
   使用 TextEncoder 将描述性字符串（如 ---------name---------size---------\n）转为字节序列，确保与二进制数据同构：

   const fileInfo = `---------${files[index].fileName}---------${files[index].length}---------\n`;
   const fileInfoBytes = new TextEncoder().encode(fileInfo); // Uint8Array

3. 合并所有 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' });

4. 发送请求（无需手动设 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 的隐式对象字符串化陷阱，实现可预测、可调试、符合底层协议的文件上传流程。