JavaScript Academy · 课时

使用 Fetch 上传文件

Q: 「使用 Fetch 上传文件」这节课中我会学到什么？

使用 FormData 将文件发送到服务器。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 FormData 将文件发送到服务器。

使用 Fetch 上传文件 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

使用网络请求 API 上传

要将文件发送到服务器，您可以使用 fetch 发送包含 FormData 的 POST 请求体。浏览器会为您处理 multipart/form-data 编码，包括文件内容。

构建 FormData

从输入项中获取文件，并将它与其他字段一起使用 append 添加到 FormData 对象中。

const file = document.querySelector('#picker').files[0];
const data = new FormData();
data.append('avatar', file);
data.append('userId', '42');

console.log(data.has('avatar'));

基本 POST 请求

将 FormData 作为 fetch POST 请求的 body 传入。响应是一个可以使用 await 等待的 Promise。

async function upload(data) {
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: data
  });
  console.log(response.status);
}

不要设置内容类型

一个常见错误是手动设置 Content-Type。请让浏览器设置它，因为其中必须包含 multipart boundary 字符串。自行设置会导致上传失败。

const response = await fetch('/api/upload', {
  method: 'POST',
  body: formData
});

console.log('browser added the boundary automatically');

读取响应

上传成功后，检查 response.ok 并解析响应体，通常解析为 JSON。

async function upload(data) {
  const response = await fetch('/api/upload', { method: 'POST', body: data });
  if (!response.ok) {
    throw new Error('upload failed: ' + response.status);
  }
  const result = await response.json();
  console.log(result);
}

处理错误

将调用封装在 try/catch 中。请注意，fetch 只会在网络失败时拒绝，因此您必须检查 response.ok 来判断 HTTP 错误状态。

async function upload(data) {
  try {
    const res = await fetch('/api/upload', { method: 'POST', body: data });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    console.log('uploaded');
  } catch (err) {
    console.log('error:', err.message);
  }
}

上传多个文件

使用 append 在同一个键下添加多个文件，或者遍历文件列表，将它们全部添加进去。

const files = document.querySelector('#picker').files;
const data = new FormData();
for (const file of files) {
  data.append('photos', file);
}

console.log(data.getAll('photos').length + ' files queued');

添加身份验证等请求标头

您可以添加 Authorization 等请求标头，但不要添加 Content-Type。请求体仍然是 FormData。

const response = await fetch('/api/upload', {
  method: 'POST',
  headers: { Authorization: 'Bearer token123' },
  body: formData
});

console.log(response.status);

发送生成的二进制大对象

您不仅可以上传选中的文件，还可以上传在浏览器中创建的数据。将二进制大对象与文件名一起添加，即可发送生成的文档。

const blob = new Blob([JSON.stringify({ ok: true })], {
  type: 'application/json'
});
const data = new FormData();
data.append('report', blob, 'report.json');

await fetch('/api/upload', { method: 'POST', body: data });
console.log('generated file sent');

中止上传

使用 AbortController 取消缓慢的上传，例如用户离开当前页面时。

const controller = new AbortController();
fetch('/api/upload', {
  method: 'POST',
  body: formData,
  signal: controller.signal
}).catch(e => console.log(e.name));

controller.abort();

为什么这很重要

将 FormData 与网络请求 API 结合，是上传文件的现代标准方式：添加字段和文件，POST FormData，然后让浏览器使用正确的边界编码 multipart。避免设置内容类型，始终检查 response.ok，并清理资源。

async function submitForm(formEl) {
  const data = new FormData(formEl);
  const res = await fetch('/submit', { method: 'POST', body: data });
  console.log('status', res.status);
}

快速检查

使用网络请求 API 发送 FormData 时，为什么不应手动设置 Content-Type 请求标头？

回顾：使用网络请求 API 上传文件

您已经学会了如何将文件发送到服务器：

将文件和字段添加到 FormData，然后将其作为 fetch 的 body 传入。
绝不要手动设置 Content-Type；浏览器会添加 multipart 边界。
检查 response.ok，因为 fetch 只会在网络错误时拒绝。
您可以发送多个文件和生成的二进制大对象，也可以使用 AbortController 取消上传。

常见问题解答

「使用 Fetch 上传文件」课时是免费的吗？

是的 — 「使用 Fetch 上传文件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「使用 Fetch 上传文件」这节课中我会学到什么？

使用 FormData 将文件发送到服务器。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用 Fetch 上传文件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy