如何使用nodejs、express、mongodb和react存储图像

npm init -y

npm install express mongoose multer react react-dom

const express = require('express');
const app = express();
const port = 3000;

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();
const port = 3000;

app.post('/upload', upload.single('image'), (req, res) => {
  // 处理图像上传逻辑
});

app.get('/image/:id', (req, res) => {
  // 处理获取图像逻辑
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/image-store', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => {
    console.log('Connected to MongoDB');
  })
  .catch((error) => {
    console.error('Failed to connect to MongoDB', error);
  });

const mongoose = require('mongoose');

const imageSchema = new mongoose.Schema({
  filename: String,
  path: String,
  createdAt: { type: Date, default: Date.now }
});

const Image = mongoose.model('Image', imageSchema);

module.exports = Image;

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();
const port = 3000;

const Image = require('./models/image');

app.post('/upload', upload.single('image'), async (req, res) => {
  const { filename, path } = req.file;

  try {
    const image = new Image({ filename, path });
    await image.save();
    res.status(201).json({ message: 'Image uploaded successfully' });
  } catch (error) {
    res.status(500).json({ error: 'Failed to upload image' });
  }
});

app.get('/image/:id', async (req, res) => {
  const { id } = req.params;

  try {
    const image = await Image.findById(id);
    res.sendFile(image.path);
  } catch (error) {
    res.status(404).json({ error: 'Image not found' });
  }
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

npx create-react-app client

import React, { useState } from 'react';

function App() {
  const [selectedImage, setSelectedImage] = useState(null);
  const [uploadStatus, setUploadStatus] = useState('');

  const handleImageChange = (event) => {
    setSelectedImage(event.target.files[0]);
  };

  const handleImageUpload = async () => {
    if (selectedImage) {
      const formData = new FormData();
      formData.append('image', selectedImage);

      try {
        const response = await fetch('/upload', {
          method: 'POST',
          body: formData
        });

        if (response.ok) {
          setUploadStatus('Image uploaded successfully');
        } else {
          setUploadStatus('Failed to upload image');
        }
      } catch (error) {
        setUploadStatus('Failed to upload image');
      }
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageChange} />
      <button onClick={handleImageUpload}>Upload Image</button>
      <p>{uploadStatus}</p>
    </div>
  );
}

export default App;

npm start