javascript - isomorphic - buscar publicación con datos de formulario multiparte

js fetch post form data

Question

Estoy buscando una URL como esta:

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)
})

Mi API espera que los datos sean de datos multipart/form-data así que estoy usando content-type de content-type de este tipo ... Pero me está dando una respuesta con el código de estado 400.

¿Qué tiene de malo mi código?

Answer 1

Está configurando Content-Type para que sea multipart/form-data , pero luego usa JSON.stringify en los datos del cuerpo, que devuelve application/json . Tiene un tipo de contenido que no coincide.

Deberá codificar sus datos como datos multipart/form-data lugar de json . Por lo general, se usan multipart/form-data al cargar archivos, y es un poco más complicado que application/x-www-form-urlencoded (que es el valor predeterminado para formularios HTML).

La especificación para multipart/form-data se puede encontrar en RFC 1867 .

Para obtener una guía sobre cómo enviar ese tipo de datos a través de JavaScript, consulte here .

La idea básica es usar el objeto FormData (no compatible con IE <10):

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

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

  fetch(url, {
    method: ''POST'',
    body: formData
  }).then(function (response) {
     ...
  });
}

Por https://muffinman.io/uploading-files-using-fetch-multipart-form-data/ asegúrese de no establecer el encabezado Content-Type . El navegador lo configurará para usted, incluido el parámetro de boundary .

Answer 2

Recientemente estuve trabajando con IPFS y resolví esto. Un ejemplo curl para que IPFS cargue un archivo se ve así:

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"

La idea básica es que cada parte (dividida por una cadena en el boundary con -- ) tiene sus propios encabezados ( Content-Type en la segunda parte, por ejemplo). El objeto FormData administra todo esto por usted, por lo que es una mejor manera de lograr nuestras metas.

Esto se traduce en buscar API de esta manera:

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)
})