This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021.

Hello everyone, I am zhang Three years old 🤣, a French front-end ⚖️. Love share 🖋️, love ice ice 🧊🧊. Welcome friends to add my wechat: Maomaoibingbing, pull you into the group, discuss together, look forward to growing with you 🥂.


Uploading profile picture this requirement generally involves the user module management system will have, but if there is no cutting this step the user experience will be poor. Use React + Ant Design to crop and upload your avatar.

I. Brief introduction of requirements

There is a popup window for input and maintenance of user information, in which you can view and modify the profile picture. Before uploading, you need to cut the profile picture (1:1), and finally submit the form for information update.

Two, start coding

1. View documents

Use the examples provided in the Ant Design documentation for encapsulation. The Image component is used to display the Image, the Upload component is used to Upload, and the antD-img-crop plug-in is used to crop the Image before uploading. Attached here is the official document portal: Upload Upload-Ant Design

2. Modify the sample code and encapsulate it

First create a new folder UploadAvatar under SRC/Components and create index.jsx. Then modify the sample code:

// src/components/UploadAvatar/index.jsx
// Upload the avatar component
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';// Default profile picture

/ * * *@param  Avatar is passed to the avatar@param  SetAvatar sets your avatar */
const UploadAvatar = ({ avatar, setAvatar }) = > {
    // * button loading
    const [loading, setLoading] = useState(false);
    // todo pre-upload verification
    const beforeUpload = file= > {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if(! isJpgOrPng) { message.error('Please upload (JPG/PNG) picture! ');
            return Upload.LIST_IGNORE;

        const isLt2M = file.size / 1024 / 1024 < 10;
        if(! isLt2M) { message.error('Please upload pictures within 10M! ');
            return Upload.LIST_IGNORE;

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

            try {
                // XXX is the image upload address
                const { data } = await request('/xxx', {
                    method: 'POST'.data: formData

                if (data) {
            } catch (err) { console.log(err) }; }};return (
                placeholder={<img src={userAvatar} width={90} />}

                <ImgCrop rotate grid>
                    <Upload {. uoloadProps} >
                        <Button type="primary" ghost loading={loading}>Modify the picture</Button>

export default UploadAvatar;
Copy the code

Then use this in other components (non-critical code has been omitted) :

// src/pages/Demo/index.jsx
import { useState } from 'react';
import UploadAvatar from '@/components/UploadAvatar';// Upload the avatar component
// ...

const Demo = () = > {
    // ...
    const[avatar, setAvatar] = useState(userInfo? .avatar);return (
        <>{/* omit other code */} {/* Use the upload avatar component */}<UploadAvatar avatar={avatar} setAvatar={setAvatar} />

export default Demo;
Copy the code

Let’s take a look at the effect:

The effect is good, the function has been realized. After uploading, the address of the picture will be returned to the parent component. Finally, you only need to submit the form at the “OK” button of the parent component to complete the operation of updating the user information.