React 之裁剪上传头像

前言

上传头像这个需求一般涉及用户模块的管理系统都会有，但是如果没有裁剪这一步骤用户体验就会差一些。那么今天就带大家使用 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 (

} fallback={userAvatar} />

修改头像

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

// src/pages/Demo/index.jsx import { useState } from 'react'; import UploadAvatar from '@/components/UploadAvatar';// 上传头像组件 // ... const Demo = () => { // ... const [avatar, setAvatar] = useState(userInfo?.avatar); return ( <> {/* 省略其他代码 */} {/* 使用上传头像组件 */} ); }; export default Demo;

我们来看一下效果：

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

React web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。