Как использовать изображение, загруженное с помощью mullter на mongodb, в моем компоненте реакции? - PullRequest
Новая
       80

Как использовать изображение, загруженное с помощью mullter на mongodb, в моем компоненте реакции?

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

Итак, я загрузил изображение на mongodb, и теперь я хочу использовать его в своем компоненте реакции, но путь к файлу никогда не работает: 

router.post('/upload-avatar', upload.single('avatar'), uploadAvatar);


export default () => {
    const [imageSource, setImageSource] = React.useState('');
    const [imageAlt, setImageAlt] = React.useState('');

    React.useEffect(() => {
        axios.get(`http://localhost:8080/api/get-avatar`)
            .then(res => {
                setImageSource(res.data.posts[0].avatar.filePath.split('\\').join('\/'));
                setImageAlt(res.data.posts[0].avatar.fileName);
            })
    }, []);



    console.log(imageSource);

    return (
        <div className="avatar">
            <img src={imageSource} alt={imageAlt} />
        </div>
    );
};

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

enter image description here

Ответы [ 2 ]

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

Ваш uploadAvatar должен быть:

Например: 

(req, res, next) => {
    const url = req.protocol + '://' + req.get('host')
    const user = new User({
        ...
        profileImg: url + '/public/' + req.file.filename
        ...
 });

и ответ в реакции: 

...
"user": {
  ...
  profileImg: "http://localhost:8000/public/avatar.png"
  ...
}
...

ответ также должен быть URL express сервер должен быть запущен (например): 

"profileImg": "http://localhost:8000/public/avatar.png"

Если вы сохраняете путь к загруженному файлу в db без url в reactjs app:

изменить: 

<img src={imageSource} alt={imageAlt} />

to 

<img src=`http://localhost:8000/public/${imageSource}` alt={imageAlt} />

Вы можете использовать эту статью, чтобы вдохновиться:

React Single File Upload Tutorial with Node, Express и Multer

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

В конце концов я понял это. Я не могу просто сделать: 

<img src={imageSource} alt={imageAlt} />

, потому что это никогда не сработает, неизвестно по какой причине. Но если вместо этого я импортирую изображение из папки, в которую Multer сохраняет изображения, например: 

import someImage from './whatever/folder/multer/save/image/some-image.jpg'

, он будет работать. Мне бы хотелось, чтобы он работал другим способом, когда я мог бы передать путь из HTTP-ответа непосредственно в атрибут источника изображения.

...