将图像存储在MongoDB中并在React.js中显示

// 后端代码（Node.js + Express）
const express = require('express');
const multer = require('multer');
const mongoose = require('mongoose');

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true });

// 创建图像模型
const ImageSchema = new mongoose.Schema({
  name: String,
  data: Buffer,
  contentType: String
});
const Image = mongoose.model('Image', ImageSchema);

// 创建Express应用
const app = express();

// 配置multer中间件，用于处理图像上传
const upload = multer({ dest: 'uploads/' });

// 处理图像上传请求
app.post('/upload', upload.single('image'), (req, res) => {
  const image = new Image();
  image.name = req.file.originalname;
  image.data = req.file.buffer;
  image.contentType = req.file.mimetype;

  image.save((err, savedImage) => {
    if (err) {
      console.error(err);
      res.status(500).send('Error saving image');
    } else {
      res.send('Image saved successfully');
    }
  });
});

// 前端代码（React.js）
import React, { useState, useEffect } from 'react';

const ImageDisplay = () => {
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    // 从后端获取图像URL
    fetch('/image-url')
      .then(response => response.json())
      .then(data => setImageUrl(data.imageUrl))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      {imageUrl && <img src={imageUrl} alt="Image" />}
    </div>
  );
};

export default ImageDisplay;