Как загрузить файл с помощью JS fetch API?

Я все еще пытаюсь обернуть мою голову вокруг него.

Я могу заставить пользователя выбрать файл (или даже несколько) с помощью ввода файла:

<form>
  <div>
    <label>Select file to upload</label>
    <input type="file">
  </div>
  <button type="submit">Convert</button>
</form>

и я могу поймать submit событие с помощью <fill in your event handler here>. Но как только я это сделаю, как отправить файл с помощью fetch?

fetch('/files', {
  method: 'post',
  // what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);
5 81
javascript fetch

5 ответов:

Это простой пример с комментариями. Элемент

61

Я сделал так:

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

fetch('/avatars', {
  method: 'POST',
  body: data
})
117

важное примечание для отправки файлов с помощью Fetch API

нужно опустить content-type заголовок для запроса на выборку. Затем браузер автоматически добавит Content type заголовок, включая границу формы, которая выглядит как 

Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD

граница формы является разделителем для данных формы

18

чтобы отправить один файл, вы можете просто использовать File объект input ' s .files массив непосредственно как значение body: в своем fetch() инициализатор:

const myInput = document.getElementById('my-input');

// Later, perhaps in a form 'submit' handler or the input's 'change' handler:
fetch('https://example.com/some_endpoint', {
  method: 'POST',
  body: myInput.files[0],
});

это работает, потому что File наследует от Blob и Blob является одним из допустимых BodyInit типы, определенные в стандарте выборки.

14

Если вы хотите кратные файл, вы можете использовать это

var input = document.querySelector('input[type="file"]')

var data = new FormData()
for (const file of input.files) {
  data.append('files',file,file.name)
}

fetch('/avatars', {
  method: 'POST',
  body: data
})
10