javascript - fetching - ¿Cómo subo un archivo con la API de búsqueda de JS?

json fetch javascript

Question

Todavía estoy tratando de entenderlo.

Puedo hacer que el usuario seleccione el archivo (o incluso varios) con la entrada del archivo:

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

Y puedo ver el evento de submit usando <fill in your event handler here> . Pero una vez que lo hago, ¿cómo envío el archivo usando fetch ?

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

Answer 1

El problema para mí fue que estaba usando un response.blob () para completar los datos del formulario. Aparentemente no puedes hacer eso al menos con react native, así que terminé usando

data.append(''fileData'', {
  uri : pickerResponse.uri,
  type: pickerResponse.type,
  name: pickerResponse.fileName
 });

Fetch parece reconocer ese formato y envía el archivo a donde apunta la uri.

Answer 2

Este es un ejemplo básico con comentarios. La función de upload es lo que está buscando:

// Select your input type file and store it in a variable
const input = document.getElementById(''fileinput'');

// This will upload the file after having read it
const upload = (file) => {
  fetch(''http://www.example.net'', { // Your POST endpoint
    method: ''POST'',
    headers: {
      // Content-Type may need to be completely **omitted**
      // or you may need something
      "Content-Type": "You will perhaps need to define a content-type here"
    },
    body: file // This is your file object
  }).then(
    response => response.json() // if the response is a JSON object
  ).then(
    success => console.log(success) // Handle the success response object
  ).catch(
    error => console.log(error) // Handle the error response object
  );
};

// Event handler executed when a file is selected
const onSelectFile = () => upload(input.files[0]);

// Add a listener on your input
// It will be triggered when a file will be selected
input.addEventListener(''change'', onSelectFile, false);

Answer 3

Lo he hecho así:

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

Answer 4

Para enviar un solo archivo, simplemente puede usar el objeto File de la matriz .files input directamente como el valor de body: en su inicializador 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],
});

Esto funciona porque File hereda de Blob , y Blob es uno de los tipos de BodyInit permitidos definidos en el estándar Fetch.

Answer 5

Saltando del enfoque de Alex Montoya para múltiples elementos de entrada de archivos

const inputFiles = document.querySelectorAll(''input[type="file"]'');
const formData = new FormData();

for (const file of inputFiles) {
    formData.append(file.name, file.files[0]);
}

fetch(url, {
    method: ''POST'',
    body: formData })

Answer 6

Si desea archivos múltiples , puede usar esto

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

Answer 7

Una nota importante para enviar archivos con Fetch API

Es necesario omitir el encabezado de content-type para la solicitud de recuperación. Luego, el navegador agregará automáticamente el encabezado Content type incluido el Límite del formulario, que se ve como

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

El límite del formulario es el delimitador de los datos del formulario.