El objeto Blob

Descubra qué es un Blob y cómo usarlo

Los navegadores web implementan unBlobobjeto, que es responsable de mantener los datos.

Blob significa "objeto grande binario" y es una representación opaca de un fragmento de bytes.

Los blobs se utilizan para muchas cosas.

Se pueden crear a partir de contenido de la red. Se pueden guardar en un disco o leer desde un disco. Son la estructura de datos subyacente paraFileutilizado en elFileReaderAPI, por ejemplo.

Se puede enviar un blob entreTrabajadores webyiFramesutilizando laAPI de mensajería de canal, y de un servidor a un cliente usando elAPI de empuje.

También se puede hacer referencia a los blobs mediante URL.

Puede extraer texto (o bytes) almacenados en un blob yLos blobs incluso se pueden almacenar directamente en IndexedDB, y también se pueden recuperar desde allí.

Mira miTutorial de IndexedDB

Los blobs son un tipo de datos fundamental para comprender.

Se puede crear un blob:

  • utilizando laBlob()constructor
  • de otro blob, usando elBlob.slice()método de instancia

El constructor toma una matriz de valores. Incluso si solo tiene una cadena para poner en el blob, debe envolverla en una matriz.

Ejemplo:

const data = new Blob(['Test'])

No es necesario que ponga unCuerdavalor. Puedes pasar:

El constructor de Blob toma un segundo parámetro opcional, que representa el tipo MIME:

const data = new Blob(['Test'], { type: 'text/plain' })

Una vez que tenga un objeto Blob, puede acceder a sus 2 propiedades:

  • sizedevuelve la longitud en bytes del contenido del blob
  • typeel tipo MIME asociado a él

y puedes llamar a sus únicos métodos,slice().

Cuando usted llamaslice()puede recuperar una parte del blob.

Este es un ejemplo de creación de un nuevo blob a partir de los bytes 10 a 20 deaBlob:

const partialBlob = aBlob.slice(10, 20);

Subiendo un blob

Este código se utiliza como devolución de llamada a un tipo de entrada o arrastrar y soltar. Cargamos un blob en una url usandoXHR, usando unffunción para seguir el progreso:

const uploadBlob = (url, blob, trackProgress) => {
	const xhr = new XMLHttpRequest()
	xhr.open('POST', url)
	xhr.send(blob)
	xhr.upload.onprogress = trackProgress
}

Descarga de datos de Internet como blob

Podemos descargar datos de Internet y almacenarlos en un objeto Blob usando esta sintaxis:

const downloadBlob = (url, callback) => {
	const xhr = new XMLHttpRequest()
	xhr.open('GET', url)
	xhr.responseType = 'blob'
<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> () =&gt; {
<span style="color:#a6e22e">callback</span>(<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">response</span>)
}

<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">send</span>(<span style="color:#66d9ef">null</span>)

}

URL de blobs

Mencioné que también se puede hacer referencia a los blobs mediante URL.

Las URL de blobs las genera el navegador y son referencias internas. Dado un blob, puede generar una URL con elURL.createObjectURL()función.

Una URL de Blob comienza conblob://esquema.

Una vez que el navegador ve esa URL, servirá el blob correspondiente almacenado en la memoria o en el disco.

Las URL de blobs son diferentes de las URL de datos (comienzan condata:), porque no almacenan los datos en la URL. También son diferentes de las URL de archivo (comenzando confile:), ya que no revelan información sensible como la ruta del archivo.

Si accede a una URL de Blob que ya no existe, obtendrá un error 404 del navegador.

Una vez que genere una URL de blob, puede eliminarla llamando alURL.revokeObjectURL()y pasando la URL.

Ejemplo cargando un archivo desde el disco local en la página y obteniendo el

En este código de muestra tenemos uninputelemento para seleccionar una imagen. Una vez que se selecciona una imagen, eliminamos el elemento de entrada y mostramos la imagen. También borramos el blob una vez que terminamos de mostrar la imagen:

<input type="file" allow="image/*"  />
const input = document.querySelector('input')

input.addEventListener(‘change’, e => { const img = document.createElement(‘img’) const imageBlob = URL.createObjectURL(input.files[0]) img.src = imageBlob

<span style="color:#a6e22e">img</span>.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>() {
  <span style="color:#a6e22e">URL</span>.<span style="color:#a6e22e">revokeObjectURL</span>(<span style="color:#a6e22e">imageBlob</span>)
}

<span style="color:#a6e22e">input</span>.<span style="color:#a6e22e">parentNode</span>.<span style="color:#a6e22e">replaceChild</span>(<span style="color:#a6e22e">img</span>, <span style="color:#a6e22e">input</span>)

})

Leyendo de la mancha

No puede acceder directamente a los datos contenidos en el blob.

Para poder hacerlo, debemos utilizar unFileReaderobjeto.


Más tutoriales de navegador: