JavaScript FormData: отправить файл и поля формы через fetch

FormData собирает файл и обычные поля в multipart-запрос, который fetch отправляет на сервер. Браузер сам добавляет boundary в Content-Type, поэтому заголовок вручную задавать не нужно.

Рабочий пример

async function upload(form, url) {
  const body = new FormData(form);
  const response = await fetch(url, { method: 'POST', body });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

Передайте HTMLFormElement, чтобы включить поля с атрибутом name. Для отдельных значений используйте body.append('title', value) и body.append('file', file).

Частый вопрос

Как показать процент загрузки?

Fetch пока не предоставляет простой API прогресса отправки во всех браузерах. Для upload progress используйте XMLHttpRequest или подходящий потоковый API.