前言
在前端开发中，处理和展示头像是一个常见的需求。@beisen/features-avatar 是一个基于 React 的开源组件，提供了一些常用的头像展示功能，如头像上传、头像展示、头像编辑等。本文将对该组件进行详细介绍和使用教程。
安装
使用 npm 进行安装：
npm install @beisen/features-avatar --save
快速开始
import Avatar from '@beisen/features-avatar'
function MyAvatar() {
const avatarUrl = 'https://example.com/avatar.jpg'
return <Avatar size={64} src={avatarUrl} />
}以上代码将在页面上渲染一个 64x64 的头像，头像展示的图片是 avatarUrl 指定的地址。
功能特点
- 头像展示：提供了丰富的头像尺寸和样式配置，支持自定义头像占位图和失败图。
- 头像上传：支持头像上传，可以自定义上传接口和上传限制，如上传图片大小、图片类型等。
- 头像编辑：提供了裁剪、旋转、翻转等常见的图片编辑功能。
文档
Avatar
头像展示组件，接受的 props 如下：
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 64 | 头像尺寸，单位 px |
| src | string | '' | 头像展示的图片地址 |
| placeholder | ReactNode | - | 自定义头像未加载时的占位内容 |
| fallback | ReactNode | - | 加载头像失败后展示的内容 |
| className | string | '' | 自定义样式类 |
| style | CSSProperties | {} | 自定义样式 |
| imgProps | React.ImgHTMLAttributes | {} | 自定义 img 标签属性 |
| onError | (event: React.SyntheticEvent<image>) => void | () => {} | 头像加载失败时的回调函数 |
| onClick | (event: React.MouseEvent<htmlelement>) => void | () => {} | 头像点击事件的回调函数 |
具体使用示例：
-- -------------------- ---- -------
------ ------ ---- -------------------------
-------- ---------- -
----- --------- - --------------------------------
------ -
-------
---------
---------------
---------------------------------
----------------------------
---------------------
-------- ---------------- ------ --
----------- ---- ---- --
------------ -- ----------------------- ---
------------ -- -------------------- ---
--
-
-AvatarUploader
头像上传组件，接受的 props 如下：
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 64 | 头像尺寸，单位 px |
| src | string | '' | 头像展示的图片地址，可以通过此 prop 控制头像的编辑状态 |
| uploadUrl | string/function | - | 头像上传接口 |
| beforeUpload | function | - | 在上传前的钩子函数，参数为上传的文件 |
| maxSize | number | 1024 * 1024 | 允许上传文件的最大尺寸，单位：bytes |
| accept | string | 'image/*' | 允许上传的文件类型 |
| uploadText | ReactNode | '上传头像' | 上传按钮的文案 |
| uploadTip | ReactNode | '支持 jpg/png/gif 格式' | 上传提示信息 |
| onUploadSuccess | function | - | 上传成功后的回调函数，参数为上传成功后的图片地址 |
| onUploadFail | function | - | 上传失败后的回调函数，参数为上传失败的原因 |
| onError | function | - | 加载头像失败后的回调函数，参数为错误事件 event |
具体使用示例：
-- -------------------- ---- -------
------ -------------- ---- --------------------------------------------
-------- ------------------ -
----- --------- - -------------
-------- ------------------ -
-----------------------------------
-
-------- ------------------------ -
--------------------- --- ---- --------
-
-------- ----------------------- -
-------------------------- ------
-
----- --------- - --------------------------------
------ -
---------------
---------
---------------
---------------------
---------------------------
------------- - -----
------------------ ----------- ----------
-------------------
-------------- ----------- -------- ----
-------------------------------------
-------------------------------
------------ -- ----------------------- ---
--
-
-AvatarEditor
头像编辑组件，是对 react-avatar-editor 组件的再次封装，增加了对上传功能的支持。如果需要裁剪、旋转、翻转等图片编辑功能，可以使用此组件。
AvatarEditor 组件基于 react-avatar-editor 封装，react-avatar-editor 是一个功能强大的图片编辑组件，提供了多种图片编辑功能，具体可以参考其官方文档。
AvatarEditor 的 props 是 react-avatar-editor 的所有 props 和 AvatarUploader 组件的部分 props，如下：
| Prop | Type | Default | Description |
|---|---|---|---|
| scale | number | 1 | 缩放比例，取值范围为 0 - 3 |
| rotate | number | 0 | 旋转角度，单位度数 |
| flip | string | '' | 翻转方向，取值为 'horizontal' 或 'vertical' |
| border | number/string | 25 | 裁剪边框大小，单位像素 |
| borderRadius | number | 0 | 裁剪后头像的圆角半径，单位像素 |
| color | number | [0, 0, 0, 0.5] | 裁剪框遮罩层颜色，RGBA 格式 |
| image | string/Image | - | 裁剪的源图片，默认为空，需要通过 src 或 setImage 方法指定 |
| width | number | 200 | 头像裁剪后的宽度，单位像素 |
| height | number | 200 | 头像裁剪后的高度，单位像素 |
| maxFileSize | number | 10 * 1024 * 1024 | 允许上传的最大文件大小 |
| uploadUrl | string/function | - | 上传头像的接口地址，可以传入一个函数实时计算 |
| beforeUpload | function | - | 上传前的钩子函数，参数为上传的文件 |
| accept | string | 'image/*' | 允许上传的文件类型 |
| uploadText | ReactNode | '上传头像' | 上传按钮的文案 |
| uploadTip | ReactNode | '支持 jpg/png/gif 格式' | 上传提示信息 |
| onUploadSuccess | function | - | 上传成功后的回调函数，参数为上传成功后的图片地址 |
| onUploadFail | function | - | 上传失败后的回调函数，参数为上传失败的原因 |
| onError | function | - | 加载头像失败后的回调函数，参数为错误事件 event |
具体使用示例：
-- -------------------- ---- -------
------ ------------ ---- ------------------------------------------
-------- ---------------- -
----- --------- - --------------------
----- ---------- ------------ - ------------
-------- ------------------------ -
--------------------- --- ---- --------
--------------------
-
-------- ----------------------- -
-------------------------- ------
-
------ -
-------------
-----------
-----------
-----------------
-----------
-----------------
------------ ---- ---- -----
----------------
-----------
------------
-------------- - ---- - -----
---------------------
-------------------- -- -----------------------------------
------------------ ----------- ----------
-------------------
-------------- ----------- -------- ----
-------------------------------------
-------------------------------
------------ -- ----------------------- ---
--
-
-结尾
@beisen/features-avatar 是一个方便易用、功能丰富的头像组件，支持多种头像展示和编辑功能。通过本文的介绍与示例，你可以快速掌握该组件的基本用法和常用功能，并在实践中灵活运用。希望本文对你有所帮助，谢谢阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabe9b5cbfe1ea06108cb