業(yè)務(wù)需求：上傳頭像，上傳完畢后拿到頭像的url，把頭像展示在頁(yè)面中，最終把頭像url和其他用戶信息一起發(fā)送給服務(wù)器
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-421447.html
上傳頭像流程
?
導(dǎo)入 Upload 組件和圖標(biāo)(一個(gè)加號(hào)，一個(gè)加載中)
import { Upload } from 'antd';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
?
定義狀態(tài)
const index = memo(() => { // 用于上傳前和上傳時(shí)切換 const [loading, setLoading] = useState(false); // 用于保存服務(wù)端返回的頭像url const [imageUrl, setImageUrl] = useState(); }
?
定義一個(gè)上傳狀態(tài)組件，上傳前顯示 + 號(hào)，上傳時(shí)顯示loading
const index = memo(() => { const uploadButton = ( <div> {loading ? <LoadingOutlined /> : <PlusOutlined />} <div style={{ marginTop: 8, }} > 上傳 </div> </div> ); }
?
組件代碼（省略其他...）
const index = memo(() => { return ( <Upload listType="picture-card" // 上傳列表的內(nèi)建樣式 showUploadList={false} // 是否展示文件列表 action="" // 這里填寫上傳的地址 beforeUpload={beforeUpload} // 上傳前執(zhí)行的操作 onChange={handleChange} // 上傳中、完成、失敗都會(huì)調(diào)用這個(gè)函數(shù)。 name='avatar' // 傳遞給后端的字段 > {imageUrl ? ( <img src={imageUrl} alt="avatar" style={{ width: '100%', }} /> ) : (uploadButton)} </Upload> ) })
?
定義頭像上傳前執(zhí)行的鉤子函數(shù)
const index = memo(() => { // 該函數(shù)會(huì)在上傳前執(zhí)行，會(huì)把file對(duì)象傳過(guò)來(lái)，可以對(duì)上傳的文件類型判斷，限制大小等 const beforeUpload = (file) => { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { message.error('只能上傳 JPG/PNG 文件!'); } const isLt1M = file.size / 1024 / 1024 < 1; if (!isLt1M) { message.error('圖片不能超過(guò)1MB!'); } return isJpgOrPng && isLt1M; }; })
?
定義頭像上傳后執(zhí)行的鉤子函數(shù)
const index = memo(() => { const handleChange = (info) => { if (info.file.status === 'uploading') { setLoading(true); return; } // 當(dāng)上傳完畢 if (info.file.status === 'done') { setLoading(false); // 判斷是否上傳成功 if (info.file.response.code === 200) { // 把返回的圖像地址設(shè)置給 imageUrl setImageUrl(info.file.response.data.imageUrl) // 取決于服務(wù)端返回的字段名 } } }; })
?
以下是在控制臺(tái)輸出 info 對(duì)象
?
完整demo文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-421447.html
import React, { memo, useState } from 'react'
import { UserWrapper } from './style'
import { Upload } from 'antd';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
const index = memo(() => {
const [loading, setLoading] = useState(false);
const [imageUrl, setImageUrl] = useState();
const beforeUpload = (file) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('只能上傳 JPG/PNG 文件!');
}
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isLt1M) {
message.error('圖片不能超過(guò)1MB!');
}
return isJpgOrPng && isLt1M;
};
const handleChange = (info) => {
if (info.file.status === 'uploading') {
setLoading(true);
return;
}
if (info.file.status === 'done') {
if (info.file.response.code === 200) {
setLoading(false);
setImageUrl(info.file.response.data.imageUrl)
}
}
};
const uploadButton = (
<div>
{loading ? <LoadingOutlined /> : <PlusOutlined />}
<div
style={{
marginTop: 8,
}}
>
上傳
</div>
</div>
);
return (
<Upload
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action="上傳的地址"
beforeUpload={beforeUpload}
onChange={handleChange}
name='avatar'
>
{imageUrl ? (
<img
src={imageUrl}
alt="avatar"
style={{
width: '100%',
}}
/>
) : (
uploadButton
)}
</Upload>
)
})
export default index
到了這里，關(guān)于react18中antd的Upload組件上傳頭像，并且拿到服務(wù)器返回的頭像的url地址在頁(yè)面中顯示頭像的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
