Выборка с данными в формате multipart

Я получаю URL-адрес, подобный этому:

fetch(url, {
  mode: 'no-cors',
  method: method || null,
  headers: {
    'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
    'Content-Type': 'multipart/form-data'
  },
  body: JSON.stringify(data) || null,
}).then(function(response) {
  console.log(response.status)
  console.log("response");
  console.log(response)
})

Мой API ожидает, что данные будут multipart/form-data, поэтому я использую content-type этого типа... Но он дает мне ответ с кодом состояния 400.

Что не так с моим кодом?

Ответы

Ответ 1

Вы устанавливаете Content-Type на multipart/form-data, но затем используете JSON.stringify для данных тела, что возвращает application/json. У вас несоответствие типов контента.

Вам нужно будет закодировать ваши данные как multipart/form-data вместо json. Обычно multipart/form-data используется при загрузке файлов и немного сложнее, чем application/x-www-form-urlencoded (который используется по умолчанию для форм HTML).

Спецификацию для multipart/form-data можно найти в RFC 1867.

Руководство о том, как отправлять такие данные с помощью javascript, см. в здесь.

Основная идея заключается в использовании объекта [FormData] [1] (не поддерживается в IE & lt; 10):

async function sendData(url, data) {
  var formData  = new FormData();

  for(var name in data) {
    formData.append(name, data[name]);
  }

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

  // ...
}

Per https://muffinman.io/uploading-files-using-fetch-multipart-form-data/ make sure *not* to set the 'Content-Type' header. The browser will set it for you, including the 'boundary' parameter.


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

Ответ 2

Недавно я работал с IPFS и работал над этим. Пример скручивания для IPFS для загрузки файла выглядит следующим образом:

curl -i -H "Content-Type: multipart/form-data; boundary=CUSTOM" -d $'--CUSTOM\r\nContent-Type: multipart/octet-stream\r\nContent-Disposition: file; filename="test"\r\n\r\nHello World!\n--CUSTOM--' "http://localhost:5001/api/v0/add"

Основная идея состоит в том, что каждая часть (разделенная на строку в boundary с --) имеет собственные заголовки (Content-Type во второй части, например.) FormData объект управляет всем этим для вас, поэтому это лучший способ достичь наших целей.

Это означает, что вы можете получить API следующим образом:

const formData = new FormData()
formData.append('blob', new Blob(['Hello World!\n']), 'test')

fetch('http://localhost:5001/api/v0/add', {
  method: 'POST',
  body: formData
})
.then(r => r.json())
.then(data => {
  console.log(data)
})