Question

终极目标：让用户上传图片（小于16mb，因此无需担心网格FS），将该图片存储在我的数据库中，通过Mongoose进行Mongodb，并使用该属性在屏幕上显示图片。 / p>

要上传文件，我使用Multer并将其添加到数据库中，如下所示：

newItem.picture.data = Buffer(fs.readFileSync(req.file.path), 'base64');
newItem.picture.contentType = 'image/png';

似乎成功地加入了mongodb。看起来像这样： how the image appears on mongodb

我能够从我的前端发送一个get请求，当我在console.log中时，这就是我得到的：Data after being retreived from database。现在的问题是，如何将其添加到属性并在屏幕上显示图像。谢谢！

编辑：主持人已将问题标记为过于宽泛。很公平，我不太确定如何接近它。由于我能够解决它，这就是我的前端的样子。

componentDidMount() {
    const PATH = "http://localhost:8080/apii/items/getitems";
    axios.get(PATH)
    .then(res => {            
        let picture64Bit = res.data[0].data.data
        picture64Bit = new Buffer(x, 'binary').toString('base64');
        this.setState({picture: picture64Bit})
    })
    .catch(err => console.log(err))
}

这里的关键是，1）res.data [0] .data.data等于随机数字列表。我把它转换回base64，所以它看起来与mongodb上面的第一张照片完全一样。然后，在img属性中内联显示它非常简单：

<img src = {`data:image/png;base64,${this.state.picture}`} />

Answer 1

您可以使用几个库，但我会随意选择Axios进行演示。如果图像已经在Mongo DB中，那听起来不错。

您的目标是从服务器获取照片到客户端，因此您需要一个功能来按需获取它们。您还可以调查fetch或request。

Axios：https://www.npmjs.com/package/axios

在React中，尝试这样的事情

  async getPhotos() {
    const res = await Axios.get('/photos')
    console.log('RESPONSE', res)

    const photos = res.data
    console.log('IMAGES', photos)

    this.setState({ photos })
  }

这是一个更完整的例子

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

class List extends Component {
  constructor(props) { // super props allows props to be available 
    super(props)       // inside the constructor
    this.state = {
      photos : [],     // Initialize empty list to assert existence as Array type
                       // and because we will retrieve a list of jpegs
      error: '',       // Initialize empty error display
    }
  }

  componentDidMount() {
    this.getPhotos()   // Do network calls in componentDidMount
  }

  async getPhotos() {
    try {
      const res = await Axios.get('/photos')
      console.log('RESPONSE', res)

      const photos = res.data
      console.log('IMAGES', photos)

      this.setState({ photos, error: '' })
    } catch (e) {
      this.setState({ error: `BRUTAL FAILURE: ${e}` })
    }
  }

  render() {
    if (error.length) {
      return (
        <div>{this.state.error}</div>
      )
    }
    if (!photos.length) {
      return (
        <div>No photos yet</div>
      )
    }
    // Assuming shape { id: 0, caption: 'Cats again', src: 'http://www.com/win.jpg' }
    // Make sure to include key prop when using map (for state management)
    return (
      <ul>
        {this.state.photos.map(photo => (
          <li key={photo.id} style={{ position: 'relative' }}>
            <span>{photo.caption}</span>
            <img src={photo.src}
            <div
              className="overlay"
              style={{
                position: 'absolute'
                width: '100%',
                height: '100%',
              }}
            />
          </li>
        ))}
      </ul>
    )
  }
}

引文：In React.js should I make my initial network request in componentWillMount or componentDidMount?

如果你想再获取一张照片，你应该尝试不可思议地将this.state.photos数组替换为自身的副本，并将新图像推到数组的末尾。我们将使用spread运算符对现有的照片数组进行浅层复制。这将允许React对两个状态进行区分并有效地更新新条目。

const res = await Axios.get('/photo?id=1337')
const photo = res.data

this.setState({
  photos: [...photos, photo]
})

注意：秘诀就是避免做this.state.photos.push(photo)。您必须在设置状态上放置非法标志。

在React中，尝试考虑一种可以获取Object或Array的方法。一旦掌握了它，就把它扔进组件的状态。当您进入Redux时，您最终会在Redux商店中存储项目。这太复杂了，现在无需描述。这些照片可能通过Redux Connect功能以this.props.photos的形式提供。

对于大多数其他时间，组件的状态字段是存储组件感兴趣的任何内容的绝佳位置。

您可以将其想象为组件顶部的持有者。

如何使用React前端

1 个答案: