Отображение файла изображения из базы данных React JS и Node JS - PullRequest
Новая
       38

Отображение файла изображения из базы данных React JS и Node JS

0 голосов
/ 05 мая 2020

У меня проблема с отображением файла изображения из моей базы данных mongodb в моих компонентах Profile и EditProfile. когда я загружаю файл с моим компонентом Editprofile, он сохраняется в базе данных, но когда я хочу получить его, чтобы просмотреть файл изображения в компоненте моего профиля, я получил взамен сломанное изображение, и если я использую alt, то alt это то, что возвращается в представлении. Я использовал грозный метод PUT, чтобы сохранить файл изображения в моей базе данных, и я установил его в качестве данных буфера в моей модели пользователя базы данных, примерно так 

photo: {
     data: buffer,
     contentType: string
}

это то, что возвращается после данные успешно сохранены в базе данных 

{ photo:
   { contentType: 'image/jpeg',
     data:
      Binary {
        _bsontype: 'Binary',
        sub_type: 0,
        position: 780831,
        buffer:
         <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 02 01 00 60 00 60 00 00 ff ee 00 0e 41 64 6f 62 65 00 64 00 00 00 00 01 ff e1 14 23 45 78 69 66 00 00 4d 4d 00 2a ... > } },
  _id: 5ea23ae949389a14c8dab6c8,
  name: 'name',
  email: 'name@gmail.com',
  salt: '0.9588954503373059',
  hashed_password: '3f9867a4786e8944d565653959110698cdcc196c',
  created: 2020-04-24T01:03:37.457Z,
  __v: 0,
  about: 'Getting to my greatness',
  updated: 2020-05-05T00:47:53.899Z }

Теперь проблема заключается в отображении изображения в компоненте просмотра профиля, я использую конечную точку api для отображения фотографии, на которой я создал маршрут и контроллер для маршрута. js

router.route('/api/users/photo/:userId')
    .get(userControl.photo, userControl.defaultPhoto)
router.route('/api/users/defaultphoto')
    .get(userControl.defaultPhoto)

контроллер. js

const photo = (req, res, next) => {
    if(req.profile.photo.data) {
        res.set("Content-Type", res.profile.photo.contentType)
        return res.send(req.profile.photo.data)
    }
    next()
}

const defaultPhoto = (req, res) => {
    return res.sendFile(profilePic)
}

Затем в моем компоненте представления профиля я вызвал api как это в методе рендеринга компонента класса 

render() {
        const {classes} = this.props
        const {redirectToSignin, user} = this.state
        const photoUrl = user._id
            ? `/api/users/photo/${user._id}?${new Date().getTime()}`
            : `/api/users/defaultphoto`
        if(redirectToSignin) {
            return (<Redirect to="/signin"/>)
        }
        return (
            <div>
                <Paper className={classes.root} elevation={4}>
                    <Typography type="title" className={classes.title}>Profile</Typography>
                    <List dense>
                        <ListItem>
                            <ListItemAvatar>
                                <Avatar src={photoUrl} className={classes.bigAvatar}/>
                            </ListItemAvatar>

                            <ListItemText primary={user.name} secondary={user.email}/>
                            {auth.isAuthenticated().user && auth.isAuthenticated().user._id == user._id &&
                              (<ListItemSecondaryAction>
                                    <Link to={'/user/edit/' + user._id}>
                                        <IconButton aria-label="Edit" color="primary">
                                            <Edit/>
                                        </IconButton>
                                    </Link>
                                    <DeleteUser userId={user._id}/>
                              </ListItemSecondaryAction>)}
                        </ListItem>
                        <Divider/>
                        <ListItem>
                            <ListItemText primary={user.about} secondary={"Joined: " + (new Date(user.created).toDateString())}/>
                        </ListItem>
                    </List>
                </Paper>
            </div>
        )
    }

Я использую материал ui Avatar для отображения изображения, и ничего не отображается Я также пробовал html img элемент все еще не работает 

const photoUrl = user._id
      ? `/api/users/photo/${user._id}?${new Date().getTime()}`
      : `/api/users/defaultphoto`

<ListItemAvatar>
    <Avatar src={photoUrl} className={classes.bigAvatar}/>
</ListItemAvatar>

Мне нужна помощь в решение этого вопроса будет очень признательно. Спасибо

1 Ответ

0 голосов
/ 05 мая 2020

Я настоятельно рекомендую избегать сохранения самого изображения в базе данных, есть более простой способ сделать это.

Допустим, вы загружаете изображение через вход type='file'. В событии формы обработки реакции вы можете взять имя файла, например: 

// Handling file input change event
const onChangeFile = e => {
    setFile(e.target.files[0]);
}

// Handling form submit
const onSubmitForm = async e => {
    e.preventDefault();
    if (File) {
        var formData = new FormData();
        formData.append('file', File);
        try {
            const res = await axios.post('http://localhost:5000/yourRoute', formData);

        }
        catch (err) {
            if (err) {
                console.log(err);
            }
        }
    } else {
        console.log("Please enter all fields");
    }
}`

Теперь в задней части вы сохраняете только изображение path + name как поле imgUrl: 

router.route('/add').post( function (req, res) {
var file = req.files.file
file.mv("your-react-image-folder-path" + file.name, err => {
if (err) {
 console.error(err);
 return res.status(500).send(err);
}
});
            var yourNewModel = new Model({
                imgUrl: "/your-react-image-folder-path/" + file.name,
            yourNewModel.save()
                .then(data => {
                    res.status(200).json(data);
                })
                .catch(err => res.status(400).json({ msg: err }));
        }
    })

  });

Наконец, отображение в приложении React будет проще, если вы получите свои данные, это будет примерно так: 

{YourVariable.map(element =>
    <Img variant="top" src={element.imgUrl} />

 )}

Примечание: этот код был написан с использованием обработчиков реакции и функциональных компонентов.

...