es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo convertir un flujo de respuesta a un blob en el lado del cliente de JavaScript?

03 Jun, 2023 Programación

No puedo crear un blob a partir del flujo de respuesta de una solicitud (la respuesta proviene de un servidor node js), aquí está el código:

fetch('/api/load', {
  method: 'POST',
  headers: { 'Content-Type': 'text/plain' },
  body: src

}).then((response) => {
  const reader = response.body.getReader()

  return new ReadableStream({
    start(controller) {
      return pump()

      function pump() {
        return reader.read().then(({ done, value }) => {
          if (done) {
            controller.close();
            return;
          }
          controller.enqueue(value);
          return pump();
        })
      }
    }
  })

}).then((stream) => {
  // ¿Qué hacer a continuación con el flujo???
})

Ya intenté new Blob([new Uint8Array(stream)], {type: 'image/jpeg'}), pero no funciona 🙁

¿Cuál es la forma correcta de crear un blob a partir del flujo?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para crear un objeto Blob a partir de una secuencia en JavaScript, se puede usar el constructor Blob(). Así es como se puede modificar el código para crear un objeto Blob a partir de la secuencia:

    fetch('/api/load', {
  method: 'POST',
  headers: { 'Content-Type': 'text/plain' },
  body: src
}).then((response) => {
  const reader = response.body.getReader()

  return new ReadableStream({
    start(controller) {
      return pump()

      function pump() {
        return reader.read().then(({ done, value }) => {
          if (done) {
            controller.close();
            return;
          }
          controller.enqueue(value);
          return pump();
        })
      }
    }
  })

}).then((stream) => {
  // Crear un objeto Blob a partir de la secuencia
  const chunks = [];
  const writer = new WritableStream({
    write(chunk) {
      chunks.push(chunk);
    },
    close() {
      const blob = new Blob(chunks, { type: 'image/jpeg' });
      // Hacer algo con el objeto Blob
    },
    abort() {
      console.error('Escritura abortada');
    }
  });

  return stream.pipeTo(writer);

    En este código actualizado, creamos un objeto WritableStream para recopilar los fragmentos de datos de la ReadableStream y luego usamos estos fragmentos para crear un objeto Blob. Se puede modificar el atributo type para que coincida con el formato de imagen esperado. Finalmente, reemplaza // Hacer algo con el objeto Blob con el código para manejar el objeto Blob.

Comments are closed.