react+antd+upload結合使用示例
更新時間:2023年05月31日 08:35:17 作者:灰太狼的情與殤
這篇文章主要為大家介紹了react+antd+upload結合使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
正文
電腦系統(tǒng) windows11專業(yè)版
開發(fā)環(huán)境 react16+antd4
在項目開發(fā)的時候,我們會需要在上傳的時候做一些限制,下面我來分享一下。
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(`請上傳寬大于等于 ${data.FileWidth} 的封面圖!`)
: message.error(`請上傳寬高大于等于 ${data.fileWidthValue} 的封面圖!`);
reject(`請上傳寬高大于等于 ${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(`上傳圖片大小不能超過${data.FileSize}M!`) && Upload.LIST_IGNORE;
};本期的分享到這里就結束啦,希望對你有所幫助,讓我們一起努力走向巔峰。
以上就是react+antd+upload 使用的詳細內(nèi)容,更多關于react+antd+upload 使用的資料請關注腳本之家其它相關文章!
相關文章
React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案
這篇文章主要為大家介紹了React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02
React-Native中禁用Navigator手勢返回的示例代碼
本篇文章主要介紹了React-Native中禁用Navigator手勢返回的示例代碼,具有一定的參考價值,有興趣的可以了解一下2017-09-09
React?Hook中的useEffecfa函數(shù)的使用小結
React 會在組件更新和卸載的時候執(zhí)行清除操作, 將上一次的監(jiān)聽取消掉, 只留下當前的監(jiān)聽,這篇文章主要介紹了React?Hook?useEffecfa函數(shù)的使用細節(jié)詳解,需要的朋友可以參考下2022-11-11

