HTML5如何上传二进制数据_HTML5二进制数据上传法【数据】_技术教程

最稳妥的二进制文件上传方式是 FormData + fetch/XMLHttpRequest；纯二进制数据则用 ArrayBuffer/Uint8Array/Blob 直接作 body 并设 Content-Type；禁用 base64 传输，避免膨胀与解码错误。

用 `FormData` 上传二进制文件最稳妥

绝大多数场景下，直接用 FormData + XMLHttpRequest 或 fetch 是最可靠的方式。它自动处理 Content-Type、边界符（boundary）、编码，且兼容所有现代浏览器。

选中后，从 files[0] 拿到 Blob 或 File 对象
新建 FormData，调用 .append("file", file)，键名按后端要求填写
fetch 不需手动设 Content-Type —— 浏览器会自动生成带 boundary 的 multipart/form-data
若用 XMLHttpRequest，也**不要**手动设 Content-Type，否则会禁用自动 boundary 生成

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async () => {
  const file = input.files[0];
  const formData = new FormData();
  formData.append('upload', file); // 键名必须和后端约定一致

  await fetch('/api/upload', {
    method: 'POST',
    body: formData // 不要加 headers: { 'Content-Type': ... }
  });
});

想传纯二进制（非文件）？用 `ArrayBuffer` + `fetch` 配 `body`

如果数据来自 canvas.toBlob()、WebAssembly 内存、或已解析的 ArrayBuffer，不需要走 FormData。这时应显式指定 Content-Type，并把二进制数据作为 body 直接发送。

ArrayBuffer、Uint8Array、Blob 都可直接赋给 fetch 的 body 选项
务必设置 headers: { 'Content-Type': 'application/octet-stream' } 或其他具体类型（如 image/png）
后端收到的是原始字节流，不是 multipart，解析方式完全不同
注意：Safari 对 ArrayBuffer 作 body 的支持从 iOS 16.4 / macOS 13.3 才稳定，旧版本建议转成 Uint8Array

const buffer = new ArrayBuffer(1024);
const view = new Uint8Array(buffer);
// ... 填充数据

await fetch('/api/binary', {
  method: 'POST',
  headers: { 'Content-Type': 'application/octet-stream' },
  body: view // 或 buffer，或 new Blob([buffer])
});