基于MERN栈的图片上传、裁剪及服务器存储问题求助

需求背景 #

基于MERN栈实现用户上传图片、浏览器端裁剪并存储裁剪后图片到服务器，已完成基础上传功能，需集成react-image-crop实现裁剪功能。

前端修改步骤（React组件） #

1. 安装依赖 #

npm install react-image-crop --save

在组件顶部引入样式：

import 'react-image-crop/dist/ReactCrop.css';

2. 修改组件代码 #

添加裁剪相关状态，处理预览图生成、裁剪区域调整、裁剪后图片转换及上传：

import React, { useState, useEffect, useRef } from 'react';
import { useAuth0 } from "@auth0/auth0-react";
import axios from 'axios';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

const Gallery = () => {
  const { user, logout } = useAuth0();
  const [file, setFile] = useState(null);
  const [images, setImages] = useState([]);
  const [previewUrl, setPreviewUrl] = useState('');
  const [crop, setCrop] = useState({ aspect: 1 / 1 }); // 可自定义裁剪比例
  const [completedCrop, setCompletedCrop] = useState(null);
  const imageRef = useRef(null);

  // 获取已上传图片列表
  useEffect(() => {
    axios
      .get('http://localhost:4000/getImages')
      .then(res => setImages(res.data))
      .catch(err => console.log(err));
  },[]);

  // 文件选择后生成预览图
  const handleChange = (e) => {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      setFile(selectedFile);
      setPreviewUrl(URL.createObjectURL(selectedFile));
    }
  };

  // 裁剪区域变化时更新状态
  const onCropChange = (crop) => {
    setCrop(crop);
  };

  // 完成裁剪时记录最终裁剪区域
  const onCropComplete = (crop) => {
    setCompletedCrop(crop);
  };

  // 将裁剪后的图片转换为Blob
  const getCroppedImg = () => {
    const image = imageRef.current;
    const canvas = document.createElement('canvas');
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = completedCrop.width;
    canvas.height = completedCrop.height;
    const ctx = canvas.getContext('2d');

    ctx.drawImage(
      image,
      completedCrop.x * scaleX,
      completedCrop.y * scaleY,
      completedCrop.width * scaleX,
      completedCrop.height * scaleY,
      0,
      0,
      completedCrop.width,
      completedCrop.height
    );

    return new Promise((resolve) => {
      canvas.toBlob((blob) => {
        resolve(blob);
      }, file.type);
    });
  };

  // 上传裁剪后的图片
  const handleUploadCropped = async () => {
    if (!completedCrop) return;
    
    const croppedBlob = await getCroppedImg();
    const formData = new FormData();
    // 给裁剪后的文件命名，保留原扩展名
    const fileName = `cropped_${Date.now()}${file.name.slice(file.name.lastIndexOf('.'))}`;
    formData.append('file', croppedBlob, fileName);
    
    axios
      .post('http://localhost:4000/upload', formData)
      .then(res => {
        setImages([...images, res.data]);
        // 重置裁剪状态
        setFile(null);
        setPreviewUrl('');
        setCompletedCrop(null);
      })
      .catch(err => console.log(err));
  };

  return (
    <div className="container mx-auto">
      <div className="flex justify-end">
        <button
          onClick={() => logout({ returnTo: window.location.origin })}
          className="bg-blue-500 text-white px-4 py-2 rounded-md"
        >
          Logout
        </button>
      </div>

      <div className="flex justify-center gap-4">
        <input type="file" accept="image/*" onChange={handleChange} />
        {previewUrl && (
          <button
            onClick={handleUploadCropped}
            className="bg-blue-500 text-white px-4 py-2 rounded-md"
          >
            上传裁剪后的图片
          </button>
        )}
      </div>

      <br />

      {/* 裁剪预览区域 */}
      {previewUrl && (
        <div className="flex justify-center mb-8">
          <ReactCrop
            src={previewUrl}
            crop={crop}
            onChange={onCropChange}
            onComplete={onCropComplete}
            imageRef={imageRef}
          />
        </div>
      )}

      <div className="grid grid-cols-3 gap-4">
        {images.map(image => (
          <img
            key={image._id}
            src={`http://localhost:4000/Images/${image.image}`}
            alt="uploaded"
            className="object-cover rounded-lg h-48 w-full"
          />
        ))}
      </div>
    </div>
  );
};

export default Gallery;

后端修改说明 #

后端代码无需大幅改动，原有的multer配置和/upload接口可直接使用，因为前端上传的裁剪后图片依然是FormData格式的文件，后端处理逻辑与原上传一致。

若需区分原图片和裁剪后的图片，可修改文件名规则或在数据库中添加标记字段，例如：

// 修改/upload接口中的创建逻辑
ImageModel.create({
  image: req.file.filename,
  isCropped: true // 添加标记字段
})

内容的提问来源于stack exchange，提问作者hussain ashraf