前端支持的主要数据类型及其使用方式

前端发送HTTP请求可以发送多种数据，不限于二进制。下面是支持的主要类型

1.文本类

application/json API交互、提交结构化数据

js 复制代码

fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice', age: 25 })
});

text/plain 纯文本内容（如日志、简单消息）

js 复制代码

fetch('/log', {
  method: 'POST',
  headers: { 'Content-Type': 'text/plain' },
  body: 'User clicked button at 10:00'
});

application/x-www-form-urlencoded 传统表单提交（类似form默认行为）

js 复制代码

const params = new URLSearchParams();
params.append('name', 'Alice');
params.append('age', '25');

fetch('/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: params
});

2.表单与文件混合Multipart

multipart/form-data

js 复制代码

const formData = new FormData();
formData.append('username', 'Alice');
formData.append('avatar', fileInput.files[0]); // 二进制文件

fetch('/upload', { method: 'POST', body: formData }); // 不要手动设 Content-Type！

3.二进制类Binary

原始二进制流（application/octet-stream）

js 复制代码

const buffer = new Uint8Array([72, 101, 108, 108, 111]); // "Hello"
fetch('/raw-binary', {
  method: 'POST',
  headers: { 'Content-Type': 'application/octet-stream' },
  body: buffer
});

动态生成的二进制数据（如 Canvas 导出图片）

js 复制代码

canvas.toBlob(blob => {
  fetch('/upload-image', {
    method: 'POST',
    body: blob // 自动识别为二进制
  });
}, 'image/png');

4. 其他特殊类型

application/xml 或 text/xml

php 复制代码

const xml = `<user><name>Alice</name></user>`;
fetch('/legacy-api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/xml' },
  body: xml
});

将二进制数据（如 Blob 或 File）转换为一个临时的、可访问的 URL

核心API：URL.createObjectURL() 接收一个Blob或File对象返回一个形如blob:xxx.com/uuid 的临时URL 该 URL 在当前文档（页面）生命周期内有效替代方式：

方式	优点	缺点	适用场景
URL.createObjectURL()	高效、支持任意二进制、可重复使用	需手动释放内存	图片/视频预览、大文件下载
FileReader.readAsDataURL()	返回 base64 字符串，无需释放	内存占用高（base64 比原数据大 33%）、不适合大文件	小图标、简单文本预览

务必在适当时机调用 URL.revokeObjectURL() 如果不释放，可能导致内存泄漏