FormData 与 Blob：二进制上传与 multipart 构造

---

title: FormData 与 Blob：二进制上传与 multipart 构造

keywords:

• FormData
• Blob
• File
• multipart/form-data
• 上传

description: 介绍 FormData 与 Blob/File 的构造与上传，用 fetch 提交 multipart/form-data，处理文件与元数据，并给出可靠性与安全建议。

categories:

• 应用软件
• 下载工具

---

概述

FormData 用于构造 multipart/form-data 请求体，结合 Blob/File 上传二进制内容，并携带字段元数据。适用于表单与文件上传、富文本插入等场景。

示例

const fd = new FormData()
fd.append('meta', JSON.stringify({ id: 1 }))
fd.append('file', new Blob([new Uint8Array([1,2,3])], { type: 'application/octet-stream' }), 'data.bin')
await fetch('/upload', { method: 'POST', body: fd })

工程建议

• 校验与安全：校验文件类型与大小；服务端验证字段与签名。
• 可靠性：失败重试与断点续传；后端分片与合并策略。
• 兼容：在旧环境回退到 XMLHttpRequest；确保进度与取消体验。

参考与验证

• MDN FormData/Blob 文档：https://developer.mozilla.org/docs/Web/API/FormData
• WHATWG Fetch 规范：https://fetch.spec.whatwg.org/