Отображение изображения, хранящегося в атласе mongodb, в передней части компонента реакции - PullRequest
Новая
       8

Отображение изображения, хранящегося в атласе mongodb, в передней части компонента реакции

0 голосов
/ 27 апреля 2020

Я пытался извлекать данные динамически с помощью стека Mern. данные содержат заголовок и описание, а также изображение: модель 

const mongoose = require('mongoose');

const Schema = mongoose.Schema; 

let Club = new Schema({
    clubImg: {type: String, required: true},
    title: {type: String, required: true},
    description: {type: String, required: true}

},

    { timestamps: true },
 {collection: 'Club'});


module.exports =mongoose.model('Club', Club)

я вставил изображение с помощью multer, извлек его и все заработало. Бэкэнд в порядке: мой сервер. js: 

const express = require('express'); 
const cors = require('cors');
const mongoose = require('mongoose'); 
const bodyParser = require('body-parser');
var Schema = mongoose.Schema;
const Club = require('./models/clubs');
const multer = require('multer'); 
const path = require('path');
const fs = require('fs');
const app = express();
const dbConfig = require('./database/db');
const uuidv4 = require('uuid/v4');



require('dotenv').config();

const port = process.env.PORT || 5000 ; 


const clubs = require('./routes/clubs');
app.use('/clubs',clubs);


app.use(cors());
app.use(express.json());

const uri = process.env.ATLAS_URI; 
mongoose.connect(uri, {useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true});
const connection = mongoose.connection; 
connection.once('open', () => {
  console.log("MongoDB database connection established successfully");
})


const DIR = './uploads/';

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, DIR);
    },
    filename: (req, file, cb) => {
        const fileName = file.originalname.toLowerCase().split(' ').join('-');
        cb(null, uuidv4() + '-' + fileName)
    }
});

var upload = multer({
    storage: storage,
    fileFilter: (req, file, cb) => {
        if (file.mimetype == "image/png" || file.mimetype == "image/jpg" || file.mimetype == "image/jpeg") {
            cb(null, true);
        } else {
            cb(null, false);
            return cb(new Error('Only .png, .jpg and .jpeg format allowed!'));
        }
    }
});


app.post('/club-data', upload.single('clubImg'), (req, res, next) => {
    const url = req.protocol + '://' + req.get('host')
    const Clubs = new Club({
        title: req.body.title,
        description: req.body.description,
        clubImg: url + '/uploads/' + req.file 
    });
    Clubs.save().then(result => {
        res.status(201).json({
            message: "club registered successfully!",
            clubsCreated: {
                _id: result._id,
                clubImg: result.clubImg
            }
        })
    }).catch(err => {
        console.log(err),
            res.status(500).json({
                error: err
            });
    })
})

app.get('/fetch',(req,res)=>{
    Club.find({})

        .then((data) => {
            console.log('Data: ', data);
            res.json(data);
        })
        .catch((error) => {
            console.log('error: ', daerrorta);
        });
});

app.listen(port,  () => {
  console.log(`server is running on port: ${port}`);
});

my component club.jsx: 

import React, { Component } from 'react';
 import axios from 'axios';

import './styling.css';
class Clubs extends Component {

 constructor() {
    super();
    this.state = {
    title:'',
    clubImg:'',
    description:'',
    Club:[]
    };

  }

componentDidMount = () => {
  var url = 'http://localhost:5000/fetch';
  axios.get(url)
  .then((response) => {
    console.log(response.data);
    this.setState({
      Club: response.data,
      title: response.title,
      clubImg: response.clubImg,
      description: response.description

    }) 
  })
};
 displayBlogPost = (Club) => {

    if (!Club.length) return null;


    return Club.map((club, index) => (
      <div key={index} className="blog-post__display">

         <div  className="card text-center shadow">
                <div className="overflow">
                    <img src={club.clubImg}  className="card-img-top"/>
                </div>
                <div className="card-body text-dark">
                    <h4 className='card-title' > {club.title}</h4>
                    <p className="card-text text-secondary">
                    {club.description} 
                    </p>
                    <a href="#" className="btn btn-outline-success" > Learn More</a>

                </div>

        </div>

    </div>


    ));
  };

    render() { 
        return (
         <div className="blog-">
          {this.displayBlogPost(this.state.Club)}
        </div>

        );
    }
}

export default Clubs;

, и он работает для извлечения данных, когда я добавляю клуб и загружаю URL, но он не показывает изображение и мои данные в атласе mongodb выглядит так: 

_id:ObjectId("5ea2113966caff249c722331")
objectid
title:"acm"
string
description: "this is a club of programming"
string
clubImg:"http://localhost:5000/uploads/[object Object]"
String
createdAt:2020-04-23T22:05:45.237+00:00
Date
updatedAt:2020-04-23T22:05:45.237+00:00
Date
__v:0

, и странная вещь в том, что даже если я вставляю разные изображения в несколько вставок, я получаю одинаковое значение clubImg, даже если в папке для загрузки изображение отличается.

...