将镜像从react上传到nodejs express API

const express = require('express');
const multer = require('multer');

const app = express();

// 设置存储路径和文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  }
});

// 创建multer实例
const upload = multer({ storage: storage });

// 处理文件上传的POST请求
app.post('/upload', upload.single('image'), (req, res) => {
  // 在这里可以对上传的镜像文件进行处理，如存储到数据库或云存储等
  res.status(200).send('Image uploaded successfully.');
});

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

import React, { useState } from 'react';

const ImageUploader = () => {
  const [selectedImage, setSelectedImage] = useState(null);

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

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

    fetch('/upload', {
      method: 'POST',
      body: formData
    })
      .then(response => response.text())
      .then(data => {
        console.log(data);
        // 在这里可以处理上传成功后的逻辑
      })
      .catch(error => {
        console.error(error);
        // 在这里可以处理上传失败后的逻辑
      });
  };

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

export default ImageUploader;