使用new Response(decompressedStream).blob()报Failed to fetch错误的解决

错误原因 #

你使用DecompressionStream('deflate')直接解压ZIP文件是错误的——ZIP是包含文件目录、元数据的容器格式，内部文件可能用deflate压缩，但整个ZIP文件并非单纯的deflate流。这种错误的解压方式导致流处理失败，浏览器抛出Failed to fetch（这是流处理异常时的通用提示）。

修复方案 #

原生API无法直接解析ZIP容器，需要使用专门的ZIP处理库（比如JSZip）。以下是修复后的完整代码：

步骤1：准备JSZip库 #

先从JSZip官方仓库下载最新的库文件（如jszip.min.js），放在项目目录中。

完整代码 #

<html>
  <body>
    <input id="open" type="file" />
    <!-- 引入本地的JSZip库文件 -->
    <script src="./jszip.min.js"></script>
    <script>
      const unzip = async (file) => {
        const zip = await JSZip.loadAsync(file);
        // 提取ZIP内的第一个文件，可根据需求修改为遍历所有文件
        const firstFileName = Object.keys(zip.files)[0];
        const fileBlob = await zip.files[firstFileName].async('blob');
        // 为Blob设置正确的MIME类型，适配后续readAsDataURL处理
        return new Blob([fileBlob], { type: zip.files[firstFileName].options.type || 'application/octet-stream' });
      };

      const opener = document.getElementById('open');
      opener.addEventListener('change', async () => {
        let [file] = opener.files;
        if (!file) return;
        
        if (file.type === 'application/zip') {
          try {
            file = await unzip(file);
          } catch (err) {
            console.error('ZIP解压失败:', err);
            return;
          }
        }

        const reader = new FileReader();
        reader.addEventListener('load', () => {
          const data = reader.result.split(',')[1];
          console.log('文件内容:', data);
        });
        reader.readAsDataURL(file);
      });
    </script>
  </body>
</html>

修复要点 #

• 用JSZip库解析ZIP容器，正确处理内部的文件结构与解压逻辑
• unzip函数提取ZIP内的文件并转为Blob格式，保留文件的MIME类型
• 添加错误捕获逻辑，避免解压失败导致后续流程中断
• 保留原有的readAsDataURL处理逻辑，确保解压后的文件能正常转为Data URL

内容的提问来源于stack exchange，提问作者patrick