将 zip 流式传输到浏览器不起作用，但在 Postman 中有效

Question

我正在使用以下 package 直接在浏览器中下载 ZIP 文件。为此，我在前端使用了以下代码：

      await this.$axios
        .get(
          `/inspections/defects/download/${this.$route.params.uuid}`, {
              responseType: 'arraybuffer' // This is the problem
          }
        )
        .then((response) => {
          const url = window.URL.createObjectURL(
            new Blob([response.data], { type: 'application/octet-stream' })
          );
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', 'file.zip');
          document.body.appendChild(link);
          link.click();
        });

而从后端我直接使用

app.get('/download/:uuid', (req, res) => {
  // get filename from db, but it's 99,9% the same as the example provided in the readme of the npm package.

  s3Zip
    .archive({ region: region, bucket: bucket }, '', 'abc.jpg')
    .pipe(res)
})

当我尝试通过邮递员“发送和下载”时，它运行良好，它下载了一个包含图像的 zip 文件，大约 5MB，这是正确的。

现在，当我尝试通过 axios 代码下载它时，我得到了

或

经过一些研究，我总是找到相同的解决方案，即设置 responseType，它似乎对每个人都适用。但是，如果我尝试这样做，我会收到以下控制台错误，并且在 google 时找不到任何相关问题：

我也尝试过不同的内容类型，但似乎无法理解它。特别是因为它适用于 Postman。

相关问题，但已通过使用 arraybuffer 解决： https://github.com/orangewise/s3-zip/issues/45

Answer 1

根据的说法，axios 目前不支持文件流。我用的是 native fetch，现在可以正常使用了。

有关如何使用 axios 执行此操作的数十个示例非常具有误导性。

将 zip 流式传输到浏览器不起作用，但在 Postman 中有效

Streaming zip to browser doesn't work, but works in Postman

stream

express

axios