網站首頁 編程語言 正文
antd upload上傳獲取文件寬高
項目新加的需求,需要判斷上傳圖片的寬高,查了一下antd-upload組件貌似不支持這個查詢,因此需要使用外部的API
直接上代碼:beforeUpload 方法
handleBeforeUpload = async (file, fileList) => {
? ? ? ? const {fileMinSize = 0,fileMinWH,fileMaxWH, fileMaxSize = 50,uploadFormat = '',uploadFormatError = ''} = this.component.props;
? ? ? ? const isInRange = ((file.size > (fileMinSize * 1024 * 1024)) && (file.size < (fileMaxSize * 1024 * 1024)));
? ? ? ? let isTrueType = true,isFileWH = true;//類型,尺寸
? ? ? ? return new Promise((resolve, reject) =>{
? ? ? ? ? ? //校驗格式
? ? ? ? ? ? if(uploadFormat != ''){
? ? ? ? ? ? ? ? let acceptArr = uploadFormat.split(',');
? ? ? ? ? ? ? ? let fileType = file.name.substring(file.name.lastIndexOf('.'));
? ? ? ? ? ? ? ? if(!acceptArr.includes(fileType)){
? ? ? ? ? ? ? ? ? ? isTrueType = false;
? ? ? ? ? ? ? ? ? ? this.message.error((uploadFormatError == '') ? '請上傳規則范圍內的文件!' : uploadFormatError);
? ? ? ? ? ? ? ? ? ? this.base.ss({'data.fileList': fileList.pop()});
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //校驗大小
?
? ? ? ? ? ? if (!isInRange) {//大小的標識
? ? ? ? ? ? ? ? this.message.error((fileMaxSize == 50) ? '請上傳規則范圍內的文件!' : '文件最大不能超過'+ fileMaxSize + 'M!');
? ? ? ? ? ? ? ? this.base.ss({'data.fileList': fileList.pop()});
? ? ? ? ? ? }
?
?
? ? ? ? ? ? //校驗寬高
? ? ? ? ? ? /*********************************/
?
? ? ? ? ? ? if(fileMinWH && fileMaxWH){//做下過濾有的圖片需要過濾
? ? ? ? ? ? ? ? var reader = new FileReader();
? ? ? ? ? ? ? ? reader.readAsDataURL(file);
? ? ? ? ? ? ? ? reader.onload = (e) => {
? ? ? ? ? ? ? ? ? ? //加載圖片獲取圖片真實寬度和高度
? ? ? ? ? ? ? ? ? ? var image = new Image();
? ? ? ? ? ? ? ? ? ? image.src=reader.result;
? ? ? ? ? ? ? ? ? ? image.onload = () =>{
? ? ? ? ? ? ? ? ? ? ? ? var width = image.width;//圖片的寬
? ? ? ? ? ? ? ? ? ? ? ? var height = image.height;//圖片的高
? ? ? ? ? ? ? ? ? ? ? ? if(width < fileMinWH ?|| width > fileMaxWH || height < fileMinWH ?|| height > fileMaxWH){
? ? ? ? ? ? ? ? ? ? ? ? ? ? isFileWH = false;
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.message.error('***寬高需要均大于600像素,小于4000像素');
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.base.ss({'data.fileList': []});
? ? ? ? ? ? ? ? ? ? ? ? ? ? reject();
? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? resolve(isFileWH && isInRange && isTrueType)
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? /**********************************/
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? resolve(isInRange && isTrueType);
? ? ? ? ? ? }
? ? ? ? })
? ? };
這樣這個功能就可以完美的解決了,*包著的代碼是最主要的。
antd上傳文件限制大小 react Hooks
const uploadImages = {
action: requestUrl + '/api/common/CommonUpload',
headers: {
SessionKey: `${localStorage.getItem('sk')}`,
},
data: (file) => {
return {
UploadType: 1027,//后端定義的type
Id: uuidv4(),
FileType: getUploadFileType(file),
};
},
beforeUpload: (file) => {// 禮品image
const limitFileNameLen = 100;
return new Promise((resolve, reject) => {
if (file.name && file.name.length > limitFileNameLen) {
message.error('Please upload a file with a file name less than 100 characters');
//請上傳文件名不超過100個字符的文件
return Promise.reject();
}
const limitM = 2;
const isLimit = file.size / 1024 / 1024 <= limitM;
console.log(isLimit);
if (!isLimit) {
message.error('The size exceeds the limit');
return Promise.reject();
}
return resolve();
});
},
}
模板:
?<Upload
? ? ? ? ? ? ? ? {...uploadImages}
? ? ? ? ? ? ? ? accept=".jpeg,.png,.jpg"
? ? ? ? ? ? ? ? listType="picture-card"
? ? ? ? ? ? ? ? fileList={fileList}
? ? ? ? ? ? ? ? onChange={handleChange}
? ? ? ? ? ? ? ? onPreview={handlePreview}
? ? ? ? ? ? >
? ? ? ? ? ? ? ? {fileList.length >= 4 ? null : uploadButton}
? ? ? ? ? ? </Upload>
總結
原文鏈接:https://blog.csdn.net/wo_dxj/article/details/107868185
相關推薦
- 2022-05-20 springCloud_Nacos服務搭建
- 2022-03-18 處理Oracle監聽程序當前無法識別連接描述符中請求的服務異常(ORA-12514)_oracle
- 2023-04-13 element UI中flex布局下el-table寬度自適應在IE下出現一直加載寬度的bug解決
- 2023-07-03 利用ant-design下拉選擇框select的labelInValue屬性給下拉選項添加圖標
- 2022-01-10 修改代碼后,刷新頁面沒有更新的解決辦法。Disable cache禁止
- 2023-06-16 C語言函數調用底層實現原理分析_C 語言
- 2023-12-15 Linux系統中date命令、hwclock命令 語法詳解
- 2023-11-26 在 el-table 中嵌入 el-checkbox el-input el-upload 多組件,
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支