Проблемы с отображением изображений из MongoDB с использованием Multer на ReactJS - PullRequest
Новая
       42

Проблемы с отображением изображений из MongoDB с использованием Multer на ReactJS

1 голос
/ 06 апреля 2019

В целом, чтобы подвести итог моей проблемы: у меня есть какое-то изображение, которое должно отображаться, и оно отображается на локальном хосте: 5000 со статусом 200, где работает мой сервер Express, и когда дело доходит до локального хоста: 3000, т.е. мой сервер разработки React, я сделал запрос использование Axios, и это дает мне тарабарщину, и я совсем не знаю, как с этим справиться.

Код реакции: 

componentDidMount() {
    axios.get('/filesuploaded/video_______82395d6a5af4e98fb8efca56f0ae3c1b_____.jpeg')
         .then(Response => console.log(Response))
         .catch(err => console.log(err));
  }

Экспресс код: 

route.get('/:filename' , (req , res) => {
    GridFS.files.findOne({filename: req.params.filename} , (err , file) => {
        const readstream = GridFS.createReadStream(file.filename);
        readstream.pipe(res);
    })
});

Случайный гиббериш: 

{data: "����..."

1 Ответ

0 голосов
/ 08 апреля 2019

РЕШЕНИЕ: Поэтому я больше поигрался с кодом и забыл, что он существует в моем package.json на стороне клиента, и я использовал его в полной мере и переписал свой код на стороне сервера, нигде не используя multer.

Package.json: 

"proxy": "http://localhost:5000" //This helps React communicate with ExpressJS through ports.

Конфигурация на стороне сервера: 

const route           = require('express').Router();
const mongoose        = require('mongoose');
const GridFS          = require('gridfs-stream');

//Route for getting files
route.get('/file/:id' , (req , res) => {

  //Setting Up GridFS-Stream
  const db          = mongoose.connection.db;
  const MongoDriver = mongoose.mongo;
  const gfs         = new GridFS(db , MongoDriver);

  const readstream = gfs.createReadStream({
    _id: req.params.id,
  });

   //Reading to Response
   readstream.pipe(res);
});

module.exports = route;

Внешний интерфейс: 


import React, { Component } from 'react'

export default class Files extends Component {

//Render Method
  render() {
    return (
      <div>
        <img src = {window.location.pathname} alt = "something" />
      </div>
    )
  }
}

Здесь window.location.pathname преобразуется в / file /: id и отправит запрос GET в ExpressJS, следовательно, загрузив изображение!

...