react+antd+upload結(jié)合使用示例
正文
電腦系統(tǒng) windows11專業(yè)版
開(kāi)發(fā)環(huán)境 react16+antd4
在項(xiàng)目開(kāi)發(fā)的時(shí)候,我們會(huì)需要在上傳的時(shí)候做一些限制,下面我來(lái)分享一下。
template
<Upload listType="picture-card" className="avatar-uploader" fileList={hotImgFileList} showUploadList={{ showPreviewIcon: true, showDownloadIcon: false, showRemoveIcon: true, }} customRequest={(options) => { UploadCustomRequest(options, { type: 'bgImg', FileSize: 1, fileType: ['png', 'jpg', 'jpeg'], fileTypeValue: '.png、.jpg、.jpeg', }); }} beforeUpload={(file) => { beforeUpload(file, { type: 'bgImg', FileWidth: 750, FileHeight: 0, fileWidthValue: '750*0', }); }} >
mathods
const beforeUpload = (file, data) => { const width = data.FileWidth; const height = file.FileHeight; return new Promise((resolve, reject) => { let reader = new FileReader(); reader.addEventListener( 'load', () => { let img = new Image(); img.src = reader.result; img.onload = () => { if (img.width < width || img.height < height) { data.FileHeight == 0 ? message.error(`請(qǐng)上傳寬大于等于 ${data.FileWidth} 的封面圖!`) : message.error(`請(qǐng)上傳寬高大于等于 ${data.fileWidthValue} 的封面圖!`); reject(`請(qǐng)上傳寬高大于等于 ${data.fileWidthValue} 的封面圖!`); } else { resolve(); } }; }, false, ); reader.readAsDataURL(file); }); };
const UploadCustomRequest = (options, data) => { // console.log(options); console.log(options.file); console.log(data); const fileType = options.file.name.split('.'); const fileDate = fileType.slice(-1); const isFileSize = options.file.size / 1024 / 1024 < data.FileSize; let IsFileType = false; if (data.fileType.indexOf(fileDate[0]) < 0) { IsFileType = false; message.error(`僅支持圖片格式:${data.fileTypeValue}格式圖片!`); return Upload.LIST_IGNORE; } else { IsFileType = true; } !isFileSize && message.error(`上傳圖片大小不能超過(guò)${data.FileSize}M!`) && Upload.LIST_IGNORE; };
本期的分享到這里就結(jié)束啦,希望對(duì)你有所幫助,讓我們一起努力走向巔峰。
以上就是react+antd+upload 使用的詳細(xì)內(nèi)容,更多關(guān)于react+antd+upload 使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案
這篇文章主要為大家介紹了React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02React-Native中禁用Navigator手勢(shì)返回的示例代碼
本篇文章主要介紹了React-Native中禁用Navigator手勢(shì)返回的示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09React?Native?Modal?的封裝與使用實(shí)例詳解
這篇文章主要介紹了React?Native?Modal?的封裝與使用,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09React使用Ant Design方式(簡(jiǎn)單使用)
文章介紹了AntDesign組件庫(kù),它是基于AntDesign設(shè)計(jì)體系的ReactUI組件庫(kù),主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品,文章詳細(xì)講解了如何下載和按需引入antd組件庫(kù),并通過(guò)一個(gè)小案例展示了如何使用antd進(jìn)行布局和改造,最后,文章提醒大家在使用過(guò)程中可以參考官網(wǎng)的屬性介紹2024-11-11React?Hook中的useEffecfa函數(shù)的使用小結(jié)
React 會(huì)在組件更新和卸載的時(shí)候執(zhí)行清除操作, 將上一次的監(jiān)聽(tīng)取消掉, 只留下當(dāng)前的監(jiān)聽(tīng),這篇文章主要介紹了React?Hook?useEffecfa函數(shù)的使用細(xì)節(jié)詳解,需要的朋友可以參考下2022-11-11