Descubra qué es un Blob y cómo usarlo
Los navegadores web implementan un Blob
objeto, que es responsable de almacenar datos.
Blob significa “objeto binario grande” 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 y son la estructura de datos subyacente que File
se utiliza en la FileReader
API, por ejemplo.
Se puede enviar un blob entre Web Workers y iFrames usando la API de mensajería de canal , y desde un servidor a un cliente usando la API Push .
También se puede hacer referencia a los blobs mediante URL.
Puede extraer texto (o bytes) almacenado en un blob, y los blobs incluso pueden almacenarse directamente en IndexedDB , y también pueden recuperarse desde allí.
Vea mi tutorial de IndexedDB
Los blobs son un tipo de datos fundamental para comprender.
Se puede crear un blob:
- usando el
Blob()
constructor - de otro blob, utilizando el
Blob.slice()
método de instancia
El constructor toma una matriz de valores. Incluso si solo tiene una cadena para colocar en el blob, debe encapsularla en una matriz.
Ejemplo:
const data = new Blob(['Test'])
No es necesario que introduzcas un valor de cadena . Puedes pasar:
- una cadena
- un
ArrayBuffer
- un
ArrayBufferView
- otras manchas
El constructor Blob toma un segundo parámetro opcional, que representa el tipo MIME:
const data = new Blob(['Test'], { type: 'text/plain' })
Una vez que tengas un objeto Blob, puedes acceder a sus 2 propiedades:
size
devuelve la longitud en bytes del contenido del blobtype
el tipo MIME asociado a él
y puedes llamar únicamente a sus métodos, slice()
.
Cuando llamas slice()
puedes recuperar una parte del blob.
Este es un ejemplo de creación de un nuevo blob a partir de los bytes 10 a 20 de aBlob
:
const partialBlob = aBlob.slice(10, 20)
Subir 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 mediante XHR y usamos una f
función para realizar un seguimiento del progreso: Trucos y guías de videojuegos
const uploadBlob = (url, blob, trackProgress) = { const xhr = new XMLHttpRequest() xhr.open('POST', url) xhr.send(blob) xhr.upload.onprogress = trackProgress}
Descargar datos de Internet como un 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' xhr.onload = () = { callback(xhr.response) } xhr.send(null)}
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, puedes generar una URL para él usando la URL.createObjectURL()
función.
Una URL de Blob comienza con el blob://
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 (que comienzan con data:
), porque no almacenan los datos en la URL. También son diferentes de las URL de archivos (que comienzan con file:
), ya que no revelan información confidencial como la ruta del archivo.
Si accede a una URL de Blob que ya no existe, recibirá un error 404 del navegador.
Una vez que genere una URL de blob, puede eliminarla llamando URL.revokeObjectURL()
y pasando la URL.
Ejemplo de carga de un archivo desde el disco local en la página y obtención de la
En este código de ejemplo tenemos un input
elemento 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 img.onload = function () { URL.revokeObjectURL(imageBlob) } input.parentNode.replaceChild(img, input)})
Leyendo desde la mancha
No se puede acceder directamente a los datos contenidos en el blob.
Para poder hacer esto, debemos utilizar un objeto FileReader .
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
El objeto Blob
Subir un blobDescargar datos de Internet como un blobURL de blobsEjemplo de carga de un archivo desde el disco local en la página y obtención de laLeyendo de
programar
es
https://aprendeprogramando.es/static/images/programar-el-objeto-blob-2018-0.jpg
2025-01-20

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente