react+antd+upload結(jié)合使用示例
正文
電腦系統(tǒng) windows11專(zhuān)業(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如何使用refresh_token實(shí)現(xiàn)無(wú)感刷新頁(yè)面
本文主要介紹了React如何使用refresh_token實(shí)現(xiàn)無(wú)感刷新頁(yè)面,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
如何利用React實(shí)現(xiàn)圖片識(shí)別App
圖片識(shí)別這個(gè)功能在很多app中都有,下面這篇文章主要給大家介紹了關(guān)于如何利用React實(shí)現(xiàn)圖片識(shí)別App的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
react?hooks?UI與業(yè)務(wù)邏輯分離必要性技術(shù)方案
這篇文章主要為大家介紹了react?hooks?UI與業(yè)務(wù)邏輯分離必要性技術(shù)方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
ReactNative實(shí)現(xiàn)的橫向滑動(dòng)條效果
本文介紹了ReactNative實(shí)現(xiàn)的橫向滑動(dòng)條效果,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),補(bǔ)充介紹了ReactNative基于寬度變化實(shí)現(xiàn)的動(dòng)畫(huà)效果,感興趣的朋友跟隨小編一起看看吧2024-02-02
React之如何在Suspense中優(yōu)雅地請(qǐng)求數(shù)據(jù)
Suspense 是 React 中的一個(gè)組件,直譯過(guò)來(lái)有懸掛的意思,能夠?qū)⑵浒漠惒浇M件掛起,直到組件加載完成后再渲染,本文詳細(xì)介紹了如何在Suspense中請(qǐng)求數(shù)據(jù),感興趣的小伙伴可以參考閱讀本文2023-04-04

