从GridFS流节点下载文件JS后端/ React前端

Question

我已经设置了一个GridFS流来处理zip文件，如果我在浏览器中输入API url，zip文件就会下载到我的计算机上，这正是我想要发生的。然而，当我从前端React应用程序发出get请求时，我得到的是一个数据对象，没有下载效果。我已经可以使用window.location.href下载了，但是我已经在产品中测试过了，它只是把我发送到那个本地主机URL(在产品中不存在)。只是想对此有所了解，我的目标是用户可以点击一个下载按钮，zip文件就会发送给用户并开始下载。谢谢！！

Answer 1

您应该在服务器响应中设置标头 Content-Disposition： 附件; filename=“filename.jpg”。

Answer 2

如果有人遇到同样的问题，我决定回答我自己的问题。要从GridFS流下载文件，请在axios请求中包含responseType:'blob'。然后使用客户端文件库（如FileSaver）保存文件。

还要确保在后端路由中包含适当的标头。

客户端.js

onDownloadSampleClick = () => {
    axios({
      method: "GET",
      url: "/api/test/stream/90b7d1d5ed550882284dcf6f62774963.zip",
      responseType: "blob"
    })
      .then(response => {
        this.setState({ fileDownloading: true }, () => {
          FileSaver.saveAs(response.data, "sparta_sample_pack.zip");
        });
      })
      .then(() => {
        this.setState({ fileDownloading: false });
        console.log("Completed");
      });
  };

Gridfs路线

router.get("/api/test/stream/:filename", (req, res) => {
  res.set({
    "Accept-Ranges": "bytes",
    "Content-Disposition": `attachment; filename=${req.params.filename}`,
    "Content-Type": "application/zip"
  });
  gfs.files.findOne({ filename: req.params.filename }, (err, file) => {
    if (!file || file.length === 0) {
      return res.status(404).json({
        error: "That File Doesn't Exist"
      });
    }
    if (file.contentType === "application/zip") {
      // Read output to browser
      const readstream = gfs.createReadStream(file.filename);
      readstream.pipe(res);
    } else {
      res.status(404).json({
        error: "This is not an zip file"
      });
    }
  });
});