本文详解如何避免 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() 会破坏二进制（尤其含 或非 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 的隐式对象字符串化陷阱，实现可预测、可调试、符合底层协议的文件上传流程。
立即学习“Java 免费学习笔记（深入）”；
