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小時內刪除侵權內容。