JavaScript 中 Ajax 怎么使用 FormData 上传文件和二进制流-js教程-PHP中文网

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 上传文件和二进制流

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));
</p>

注意：不要手动设置 Content-Type 头，否则浏览器无法写入 boundary，后端收不到文件。

上传二进制流（如 Blob、ArrayBuffer、TypedArray）

如果已有二进制数据（比如 canvas 导出的 blob、fetch 下载后的 response.blob()、或 base64 解码后的 Uint8Array），可直接 append 到 FormData：

Miller CSV TSV JSON 数据处理器

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')
</p>

重点：即使使用 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'）必须前后端一致，且大小写敏感。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南