使用节点 js 从 mongodb atlas 下载文件到客户端（react js）

Question

我是 Reactjs 和 Nodejs 的初学者。我正在尝试使用节点 js 从 mongodb atlas 下载文件（.pdf，.jpg）以做出反应。我已经使用 Gridfs 的 createReadStream 方法在服务器上获取数据，需要将此数据作为文件发送以做出反应，以便用户可以在需要时下载它。但是无法在客户端获取文件。

FileServer.js

app.use('/download', (req, res) => {
  // Check file exist on MongoDB
var filename = req.query.filename;
console.log(req.body.filename);

gfs.exist({ filename: req.body.filename ,"root": "uploads"}, (err, file) => {
    console.log(file);
      if (err || !file) {
        console.log("error")
          res.status(404).send('File Not Found');
          return
      } 

      res.setHeader('Content-Type', 'application/octet-stream');
      res.setHeader('Content-Disposition', 'attachment; filename="'+req.body.filename+'"');
var str='';
var readstream = gfs.createReadStream({ filename: req.body.filename });  
readstream.pipe(res);    

  });
});

FileClient.js

onSubmitDownload(e){
        e.preventDefault();
    axios.post("http://localhost:3000/file_server/download", {filename:'MyFile.pdf'})
    .then(res => res.data).then(res=>this.setState({
        msg:res
    }));
}

无法接受文件格式的响应

Answer 1

诀窍在于以我们想要的格式获取响应，这里我们需要以文件格式接收数据。所以客户端使用 Filesaver 的代码是

onSubmitDownload(e){
e.preventDefault();
        axios({
            method: "GET",
            url: "http://localhost:8000/download",
            responseType: "blob"
        }).then(response => {
            this.setState({ fileDownloading: true }, () => {

                FileSaver.saveAs(response.data, data1);
                console.log(response);
            });
            })
            .then(() => {
            this.setState({ fileDownloading: false });
            console.log("Completed");
            });
}

你也可以查看https://github.com/ANS-Developers113/File-Upload-Download-Application

使用节点 js 从 mongodb atlas 下载文件到客户端（react js）

File download from mongodb atlas to client(react js) using node js

mongodb

node.js

gridfs

reactjs

axios