前言

上传头像这个需求一般涉及用户模块的管理系统都会有，但是如果没有裁剪这一步骤用户体验就会差一些。那么今天就带大家使用 React + Ant Design 实现裁剪并上传头像这一功能。

一、需求简介

有一个输入维护用户信息的弹窗，其中可以查看头像并修改之，上传之前需要对头像进行裁剪（1：1），最后统一提交表单进行信息更新。

二、开始编码

1. 查看文档

采用 Ant Design 文档中提供的示例进行封装。使用 Image 组件显示图片，Upload 组件进行上传，借助 antd-img-crop 插件实现上传前裁剪。此处附上官方文档传送门：上传 Upload - Ant Design

2. 修改示例代码并封装

首先在 src/components 下新建文件夹 UploadAvatar 并新建 index.jsx ，然后对示例代码进行修改：

// src/components/UploadAvatar/index.jsx
// 上传头像组件
import { useState } from 'react';
import { request } from 'umi';
import { Button, Image, message, Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
import userAvatar from '@/assets/images/common/user-avatar.svg';// 默认头像

/**
 * @param  avatar     传入头像
 * @param  setAvatar  设置头像方法
 */
const UploadAvatar = ({ avatar, setAvatar }) => {
    // * 按钮loading
    const [loading, setLoading] = useState(false);
    // todo 上传前校验
    const beforeUpload = file => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('请上传(JPG/PNG)图片!');
            return Upload.LIST_IGNORE;
        };

        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isLt2M) {
            message.error('请上传10M以内的图片!');
            return Upload.LIST_IGNORE;
        };

        return isJpgOrPng && isLt2M;
    };
    // * Upload配置
    const uoloadProps = {
        showUploadList: false,
        beforeUpload,
        onChange: ({ file: { status } }) => {
            switch (status) {
                case 'uploading':
                    setLoading(true);
                    break;
                case 'done':
                    setLoading(false);
            };
        },
        customRequest: async ({ file }) => {
            const formData = new FormData();
            formData.append('avatarfile', file);

            try {
                // xxx 为图片上传地址
                const { data } = await request('/xxx', {
                    method: 'POST',
                    data: formData
                });

                if (data) {
                    setAvatar(data);
                    setLoading(false);
                };
            } catch (err) { console.log(err) };
        }
    };

    return (
        <div>
            <Image
                width={90}
                src={avatar}
                placeholder={<img src={userAvatar} width={90} />}
                fallback={userAvatar}
            />

            <div>
                <ImgCrop rotate grid>
                    <Upload {...uoloadProps}>
                        <Button type="primary" ghost loading={loading}>修改头像</Button>
                    </Upload>
                </ImgCrop>
            </div>
        </div>
    );
};

export default UploadAvatar;

然后在其他组件中这样使用（已省略非关键代码）：

// src/pages/Demo/index.jsx
import { useState } from 'react';
import UploadAvatar from '@/components/UploadAvatar';// 上传头像组件
// ...

const Demo = () => {
    // ...
    const [avatar, setAvatar] = useState(userInfo?.avatar);

    return (
        <>
            {/* 省略其他代码 */}

            {/* 使用上传头像组件 */}
            <UploadAvatar avatar={avatar} setAvatar={setAvatar} />
        </>
    );
};

export default Demo;

我们来看一下效果：

效果还不错，功能已实现。上传后图片的地址会返回给父组件，最后只需在父组件的 确定 按钮处提交表单即可完成更新用户信息操作。