使用ArrayBuffer创建文件与原文件不一致的问题及解决办法

• 通过reader.readAsArrayBuffer从图片文件创建uint8类型的ArrayBuffer，该ArrayBuffer大小为30984，与原图片文件大小一致。
• 但使用此uint8创建新文件时，文件容量增大至69596，生成的文件无法被识别为图片，上传后也出现异常。
• 正在实现接收二进制文件的上传功能，想明确差异原因，以及如何创建与原文件完全一致的文件。

核心原因 #

最常见的问题是错误地将二进制图片数据转成字符串再转回二进制。图片属于二进制格式，包含大量非UTF-8兼容的字节，转字符串时这些字节会被替换成占位符（比如�），再转回二进制时，每个占位符会被解析为多个字节，直接导致文件体积膨胀、数据损坏。

正确创建文件的方式 #

直接基于原始ArrayBuffer创建Blob或File对象，全程避免字符串转换：

方式1：直接用ArrayBuffer生成File #

// 假设reader读取完成后得到arrayBuffer
const arrayBuffer = reader.result;
// 直接创建File对象，参数依次为：数据数组、文件名、文件配置
const newFile = new File([arrayBuffer], "original-image.jpg", { type: "image/jpeg" });

方式2：通过Blob中转生成File #

如果需要先处理Blob：

const arrayBuffer = reader.result;
const blob = new Blob([arrayBuffer], { type: "image/jpeg" });
const newFile = new File([blob], "original-image.jpg", { type: "image/jpeg" });

上传时的注意点 #

上传阶段直接发送Blob或File对象，不要手动转成字符串再编码：

// 用FormData封装上传
const formData = new FormData();
formData.append("file", newFile);

fetch("/upload", {
  method: "POST",
  body: formData
});

内容的提问来源于stack exchange，提问作者리루스