Чтение и отображение изображений из zip-файла в React с использованием jszip

У меня есть zip-файл, содержащий изображения, mp4-файлы и текстовый файл. Текстовый файл, который я читаю, выглядит так:

      jszip
      .loadAsync(arrayBuffer)
      .then(({ files }) => {
        const txtFiles = Object.entries(files).filter(([fileName]) =>
          fileName.endsWith('.txt'),
        );

        if (!txtFiles.length) {
          throw new Error('No txt files found in archive');
        }

        return txtFiles
          .sort(([a], [b]) => a.length - b.length)[0][1]
          .async('string');
      })

и он отлично работает. Но мне также нужно получить все изображения / mp4 в файле, поэтому я попробовал:

    jszip
      .loadAsync(arrayBuffer)
      .then(({ files }) => {
        const jpgs = [];
        const mediaFiles = Object.entries(files).filter(([fileName]) =>
          fileName.endsWith('.jpg'),
        );

        if (!mediaFiles.length) {
          throw new Error('No media files found in archive');
        }

        mediaFiles.forEach(i => {
          blob = new Blob([i], {
            type: 'image/jpeg',
          });

          img = new Image();
          img.src = URL.createObjectURL(blob);
          jpgs.push(img);
        });

        return jpgs;
      })

теперь, когда я пытаюсь визуализировать массив jpgs, я получаю кучу элементов img, например:

<img alt="img" src="blob:http://localhost:3000/d64b16c7-aa9c-49a7-96cc-ed4eafc6a054">

но нет изображений / сломанных значков изображений. Что я делаю не так?


reactjs image blob jszip
person suraj sharma    schedule 11.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Очевидно, я неправильно использовал blob, следующий код решил эту проблему за меня, благодаря Loris Bettazza:

mediaFiles.forEach(([, image]) => {
  image.async('blob').then(blob => {
    const img = new Image();
    img.src = URL.createObjectURL(blob);
    document.body.prepend(img);
  });
});

person suraj sharma    schedule 12.06.2020