Загрузка файлов из GridFS Stream NodeJS Backend / React Front End - PullRequest
Новая
       30

Загрузка файлов из GridFS Stream NodeJS Backend / React Front End

0 голосов
/ 04 октября 2018

Я настроил поток GridFS, который обслуживает zip-файлы, если я наберу URL-адрес API в браузере, zip-файл загружается на мой компьютер, и это именно то, чего я хочу.Однако, когда я делаю запрос на получение из внешнего приложения React, я возвращаю объект данных без эффекта загрузки.Я смог заставить загрузку работать, используя window.location.href, но я проверил это в производстве, и он просто отправляет меня на этот локальный URL (который не существует в производстве).Я просто хочу получить представление об этом, и моя цель состоит в том, чтобы пользователь мог щелкнуть кнопку загрузки, и почтовый файл отправляется пользователю и начинается загрузка.Спасибо !!

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Я решил ответить на свой вопрос, если кто-нибудь сталкивался с той же проблемой.Чтобы загрузить файл из потока GridFS, включите responseType: 'blob' в свой запрос axios.А затем сохраните файл с помощью клиентской библиотеки файлов, такой как 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 route 

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"
      });
    }
  });
});
0 голосов
/ 05 октября 2018

Вы должны установить заголовок Content-Disposition: attachment; filename="filename.jpg" в ответе сервера.

...