XMLHttpRequest.send(file) 的 Fetch API 是什么？

Question

我正在尝试将客户端重构为来自 XMLHttpRequest 的旧后端以改用 Fetch API，但我很难弄清楚 Fetch API 等同于 xhr.send(file) 在下面的代码中。

input.addEventListener('change', function(event) {
  var file = event.target.files[0];
  var url = 'https://somedomain.com/someendpoint';
  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'image/jpeg');
  xhr.send(file);
}

Answer 1

可以这样做：

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

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

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

https://github.com/github/fetch

https://developer.mozilla.org/en-US/docs/Web/API/FormData

Answer 2

fetch可以带一个second argument、init，指定请求的高级选项。特别是，您可以指定 method 和 body 选项：

fetch(url, {
  method: 'POST',
  headers: new Headers({
    "Content-Type": "image/jpeg",
  }),
  body: file,
})

您也可以将相同的选项传递给 Request constructor。

body 必须是 Blob、BufferSource、FormData、URLSearchParams 或 USVString 对象。幸运的是，File 对象只是一种特殊的 Blob，可以使用 everywhere where Blobs are accepted.

XMLHttpRequest.send(file) 的 Fetch API 是什么？

What is the Fetch API equivalent of XMLHttpRequest.send(file)?

html

javascript

ajax

dom

fetch-api