使用express服务器将图片从React前端上传到Mongo db。

const express = require('express');
const multer = require('multer');
const mongoose = require('mongoose');
const { Schema } = mongoose;

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

// 创建图片模式
const imageSchema = new Schema({
  filename: String,
  filepath: String
});

// 创建图片模型
const Image = mongoose.model('Image', imageSchema);

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

// 处理图片上传的路由
app.post('/upload', upload.single('image'), (req, res) => {
  // 创建一个新的图片文档
  const newImage = new Image({
    filename: req.file.filename,
    filepath: req.file.path
  });

  // 将图片保存到MongoDB
  newImage.save((err, savedImage) => {
    if (err) {
      console.log(err);
      return res.status(500).send('Server Error');
    }
    
    return res.send('Image uploaded and saved to MongoDB');
  });
});

// 启动Express服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

import React, { useState } from 'react';
import axios from 'axios';

function ImageUpload() {
  const [selectedImage, setSelectedImage] = useState(null);

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

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

    axios.post('http://localhost:3000/upload', formData)
      .then((res) => {
        console.log(res.data);
        // 图片上传成功的处理逻辑
      })
      .catch((err) => {
        console.log(err);
        // 图片上传失败的处理逻辑
      });
  };

  return (
    <div>
      <input type="file" onChange={handleImageChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}