从 GridFS Stream NodeJS 后端/React 前端下载文件

Question

我已经设置了一个提供 zip 文件的 GridFS 流，如果我在浏览器中输入 API url，zip 文件就会下载到我的电脑上，这就是我想要的发生。但是，当我从前端 React 应用程序发出获取请求时，我取回了一个数据对象并且没有下载效果。我已经能够使用 window.location.href 下载工作，但我已经在生产中测试了它，它只是将我发送到那个本地主机 URL （生产中不存在）。只是想对此有所了解，我的目标是用户可以单击下载按钮，然后将 zip 文件发送给用户并开始下载。谢谢！！

Answer 1

您应该在服务器响应中设置 header Content-Disposition: attachment; filename="filename.jpg"。

Answer 2

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

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

client.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"
      });
    }
  });
});

从 GridFS Stream NodeJS 后端/React 前端下载文件

Download files from GridFS Stream NodeJS Backend / React Front End

mongodb

node.js

gridfs

reactjs

gridfs-stream