传输上传数据

FormData

FormData 对象用于构建一组表示表单字段及其值的键值对，通常用于通过 XMLHttpRequest 或 fetch 发送数据，特别适合文件上传。

提示

当请求包含文件时，需要特殊的数据格式：multipart/form-data。但是需要注意的是，浏览器会自动为我们处理这个问题，不需要手动显式地设置 Content-Type 头。

🤔 为什么？

当检测到 body 是 FormData 对象时，浏览器会：

1. 自动生成随机的 boundary 字符串。
2. 自动设置完整的 Content-Type 头。
3. 按照规范格式化请求体。

常见写法

传统方式

浏览器自动处理表单提交。

<form enctype="multipart/form-data">
  <input type="file" name="fileInput" />
  <button type="submit">上传文件</button>
</form>

手动构建 FormData

const fileInput = document.getElementById('fileInput')
const file = fileInput.files[0] // 获取用户选择的文件

// 创建 FormData 对象
const formData = new FormData()
// 添加文件字段
formData.append('file', file)
// 添加其他字段
formData.append('username', 'exampleUser')
formData.append('email', 'user@example.com')

// ... 通过 XMLHttpRequest 或 fetch 发送 formData