显示来自数据库React JS和Node JS的图像文件

Question

我在从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: '[email protected]',
  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端点显示我为其创建路线和控制器的照片route.js

router.route('/api/users/photo/:userId')
    .get(userControl.photo, userControl.defaultPhoto)
router.route('/api/users/defaultphoto')
    .get(userControl.defaultPhoto)
controller.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)
}
然后在我的Profile视图组件中，我在类组件的render方法中这样调用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>
        )
    }
我正在使用材料用户界面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>
我在解决此问题方面需要帮助，我们将不胜感激。谢谢

我在从mongodb数据库到我的Profile和EditProfile组件显示图像文件时遇到问题。当我使用Editprofile组件上载文件时，它将保存到数据库中，但是当...

Answer 1

我强烈建议您避免将图像本身存储在数据库中，这是一种更简单的方法。