终极目标:让用户上传图片(小于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}`} />
答案 0 :(得分:0)
您可以使用几个库,但我会随意选择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
的形式提供。
对于大多数其他时间,组件的状态字段是存储组件感兴趣的任何内容的绝佳位置。
您可以将其想象为组件顶部的持有者。