使用node js从mongodb atlas下载文件到客户端(react js)

cngwdvgl  于 2023-06-22  发布在  Node.js
关注(0)|答案(1)|浏览(140)

我是Reactjs和Nodejs的初学者。我正在尝试使用node js从react中的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
    }));
}

无法以文件格式进行响应

u0sqgete

u0sqgete1#

诀窍是以我们想要的格式获得响应,这里我们需要以文件格式接收数据。因此,使用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

相关问题