JavaScript 中 Fetch 怎么处理上传文件的二进制流-js教程-PHP中文网

fetch 上传文件应使用 formdata 包裹 file 或 blob 对象，浏览器自动设置 multipart/form-data 及 boundary；避免手动构造二进制流，后端需按字段名解析 multipart 数据。

javascript 中 fetch 怎么处理上传文件的二进制流

Fetch 上传文件的二进制流，核心是用 FormData 包裹 File 或 Blob 对象，让浏览器自动设置正确的 Content-Type（multipart/form-data）和边界（boundary），无需手动构造二进制流。

直接用 FormData 上传 File/Blob

这是最常用、最可靠的方式。浏览器会自动处理编码、分隔符和字段名：

从 <input type="file"> 获取 File 对象（它继承自 Blob）
创建 FormData 实例，调用 .append(key, file, filename?)
把 FormData 直接传给 fetch() 的 body，不设 headers（否则会覆盖自动设置的 Content-Type）

示例：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async () => {
  const file = input.files[0];
  if (!file) return;

  const formData = new FormData();
  formData.append('upload', file, file.name); // 第三个参数可选，用于服务端获取原始文件名

  try {
    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData // ✅ 不要加 headers: {'Content-Type': ...}
    });
    console.log(await res.json());
  } catch (err) {
    console.error(err);
  }
});

手动构造 Blob 并上传（适合非 input 场景）

当你没有 <input>，而是需要从 canvas、音频流、字符串等生成二进制数据时，可用 Blob：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

用 new Blob([data], {type: 'mime/type'}) 创建二进制对象
仍通过 FormData.append() 提交，不要转成 ArrayBuffer 或手动拼接 multipart
若需指定文件名（如服务端依赖 filename 解析类型），第三个参数必须传字符串

例如上传 canvas 截图：

const canvas = document.getElementById('myCanvas');
const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
const formData = new FormData();
formData.append('image', blob, 'screenshot.png'); // 显式命名很重要

await fetch('/api/upload', { method: 'POST', body: formData });