Question

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

Answer 1

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

Answer 2

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

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

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前端下载文件

2 个答案: