什么是XMLHttpRequest.send（文件）的Fetch API等價物？

Question

我正在嘗試將客戶端重構為XMLHttpRequest的舊后端，而不是使用Fetch API，我很難弄清楚下面代碼中xhr.send（文件）的Fetch API等價物。

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

fetch可以使用第二個參數 init ，它指定請求的高級選項。 特別是，您可以指定method和body選項：

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

您還可以將相同的選項傳遞給Request 構造函數 。

body必須是Blob，BufferSource，FormData，URLSearchParams或USVString對象。 幸運的是，File對象只是一種特殊的Blob，可以在任何接受Blob的地方使用。

Answer 2

這可以這樣做：

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