在React中使用Antd将裁剪后的图像上传到Express multer

npm install antd

import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

import React, { useState } from 'react';
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

const MyComponent = () => {
  const [crop, setCrop] = useState({ aspect: 1 / 1 });
  const [file, setFile] = useState(null);
  const [croppedImage, setCroppedImage] = useState(null);

  const handleCropChange = (newCrop) => {
    setCrop(newCrop);
  };

  const handleImageUpload = (file) => {
    setFile(file);
  };

  const handleImageCrop = () => {
    const canvas = document.createElement('canvas');
    const scaleX = file.width / file.naturalWidth;
    const scaleY = file.height / file.naturalHeight;
    const ctx = canvas.getContext('2d');
    const croppedWidth = crop.width * scaleX;
    const croppedHeight = crop.height * scaleY;
    canvas.width = croppedWidth;
    canvas.height = croppedHeight;
    ctx.drawImage(
      file,
      crop.x * scaleX,
      crop.y * scaleY,
      croppedWidth,
      croppedHeight,
      0,
      0,
      croppedWidth,
      croppedHeight
    );
    canvas.toBlob((blob) => {
      // 这里可以将裁剪后的图像上传到服务器
      // 使用Express的multer中间件来接收图像
      // 以下代码仅为示例，请根据你的实际情况进行修改
      const formData = new FormData();
      formData.append('image', blob);
      fetch('/upload', {
        method: 'POST',
        body: formData,
      })
        .then((response) => response.json())
        .then((data) => {
          message.success('图像上传成功！');
        })
        .catch((error) => {
          message.error('图像上传失败！');
        });
    });
  };

  return (
    <div>
      <Upload beforeUpload={handleImageUpload}>
        <Button icon={<UploadOutlined />} size="large">
          选择图像
        </Button>
      </Upload>
      {file && (
        <ReactCrop
          src={URL.createObjectURL(file)}
          crop={crop}
          onChange={handleCropChange}
        />
      )}
      {file && crop.width && crop.height && (
        <Button type="primary" onClick={handleImageCrop}>
          上传裁剪后的图像
        </Button>
      )}
    </div>
  );
};

export default MyComponent;

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);
  },
});

const upload = multer({ storage });

app.post('/upload', upload.single('image'), (req, res) => {
  // 在这里可以对上传的图像进行处理或保存到数据库等操作
  // 返回适当的响应
  res.json({ success: true });
});

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