JavaScript 上传文件和二进制流的核心是使用 FormData 配合 XMLHttpRequest 或 fetch，且不可手动设置 Content-Type，须由浏览器自动构造 multipart/form-data 及 boundary；FormData 支持 append 文件（File/Blob）和字符串字段，二进制数据（如 ArrayBuffer、Uint8Array）需转为 Blob 再 append；XMLHttpRequest 可监听进度但同样禁止 setRequestHeader('Content-Type')；后端需按 multipart 解析，字段名须与前端一致。
JavaScript 中用 Ajax 上传文件和二进制流，核心是配合 FormData 和 XMLHttpRequest（或 fetch），关键在于不手动设置 Content-Type，让浏览器自动构造带 boundary 的 multipart/form-data 请求体。
用 FormData 上传文件（含多个字段）
FormData 天然支持文件对象（File 或 Blob），也支持普通字符串字段。只需把文件 input 的 files[0] 或拖拽得到的 File 实例 append 进去：
示例代码：
const form = new FormData();
form.append('username', 'Alice');
form.append('avatar', fileInput.files[0]); // File 对象
form.append('description', '头像上传测试');
<p>fetch('/upload', {
method: 'POST',
body: form // 不设 headers，让浏览器自动设置 Content-Type
})
.then(res => res.json())
.then(data => console.log(data));
注意：不要手动设置 Content-Type 头，否则浏览器无法写入 boundary，后端收不到文件。
立即学习“Java免费学习笔记（深入）”；
上传二进制流（如 Blob、ArrayBuffer、TypedArray）
如果已有二进制数据（比如 canvas 导出的 blob、fetch 下载后的 response.blob()、或 base64 解码后的 Uint8Array），可直接 append 到 FormData：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 对于
Blob：直接form.append('file', blob, 'custom.jpg')（第三个参数为可选文件名） - 对于
ArrayBuffer：先转成Blob，再 append：new Blob([arrayBuffer], {type: 'image/jpeg'}) - 对于
Uint8Array：同上，传入数组即可创建 Blob
小技巧：用 URL.createObjectURL(blob) 可临时预览上传的二进制内容（如图片）。
用 XMLHttpRequest 做更细粒度控制（如监听进度）
当需要显示上传进度、取消请求或兼容老环境时，XMLHttpRequest 更合适：
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = e => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total * 100).toFixed(1);
console.log(`上传中：${percent}%`);
}
};
<p>xhr.onload = () => {
if (xhr.status === 200) {
console.log('上传成功', JSON.parse(xhr.responseText));
}
};</p><p>xhr.open('POST', '/upload');
xhr.send(form); // 同样不设 setRequestHeader('Content-Type')
重点：即使使用 xhr，也不应调用 xhr.setRequestHeader('Content-Type', ...)，否则 multipart 会失效。
后端接收注意点（简要提醒）
服务端需按 multipart/form-data 解析请求体：
- Node.js（Express）：用
multer中间件 - Python（Flask）：通过
request.files.get('avatar')获取文件，request.form.get('username')获取文本字段 - Java（Spring Boot）：用
@RequestParam MultipartFile avatar接收
字段名（如 'avatar'）必须前后端一致，且大小写敏感。
