使用 React + Ant Design 实现头像裁剪并上传

前言

头像裁剪上传在很多系统中都有，比如社交平台、个人博客、社区论坛等等。它可以让用户选择上传自己的头像，并对其进行裁剪，以达到最好的视觉效果。本文将介绍如何使用React和Ant Design来实现头像裁剪和上传功能。

实现步骤

1. 安装依赖包

npm install antd @ant-design/icons react-cropperjs cropperjs

2. 在 App.js 中引入依赖包

import { Upload, message, Button, Icon } from 'antd';
import { useState } from 'react';
import Cropper from 'react-cropperjs';
import 'cropperjs/dist/cropper.css';

3. 定义头像裁剪组件

const AvatarCropper = () => {
  const [file, setFile] = useState(null);
  const [croppedImage, setCroppedImage] = useState(null);

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

  const handleCrop = () => {
    if (!file) {
      message.error('请先选择一张图片');
      return;
    }

    cropper.getCroppedCanvas().toBlob((blob) => {
      setCroppedImage(URL.createObjectURL(blob));
    });
  };

  const handleUpload = () => {
    if (!croppedImage) {
      message.error('请先裁剪图片');
      return;
    }

    const formData = new FormData();
    formData.append('avatar', croppedImage);

    fetch('/api/uploadAvatar', {
      method: 'POST',
      body: formData,
    })
      .then((res) => res.json())
      .then((data) => {
        if (data.code === 0) {
          message.success('上传成功');
        } else {
          message.error(data.message);
        }
      })
      .catch((err) => {
        message.error('上传失败');
      });
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      <Cropper
        ref={(cropper) => { this.cropper = cropper; }}
        src={file && URL.createObjectURL(file)}
        style={{ width: '200px', height: '200px' }}
      />
      <Button type="primary" onClick={handleCrop}>裁剪</Button>
      <Button type="primary" onClick={handleUpload}>上传</Button>
      {croppedImage && <img src={croppedImage} alt="头像" />}
    </div>
  );
};

4. 在 App.js 中渲染头像裁剪组件

function App() {
  return (
    <div>
      <AvatarCropper />
    </div>
  );
}

export default App;

结语

本文介绍了如何使用React和Ant Design来实现头像裁剪和上传功能。这种方法简单易懂，并且可以很好地满足用户的需求。希望本文对您有所帮助。