antd?upload上傳如何獲取文件寬高
更新時間:2023年02月12日 14:23:43 作者:wo_dxj
這篇文章主要介紹了antd?upload上傳如何獲取文件寬高問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
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 == '') ? '請上傳規(guī)則范圍內(nèi)的文件!' : uploadFormatError); ? ? ? ? ? ? ? ? ? ? this.base.ss({'data.fileList': fileList.pop()}); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? //校驗大小 ? ? ? ? ? ? ? if (!isInRange) {//大小的標識 ? ? ? ? ? ? ? ? this.message.error((fileMaxSize == 50) ? '請上傳規(guī)則范圍內(nèi)的文件!' : '文件最大不能超過'+ 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>
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用React+SpringBoot開發(fā)一個協(xié)同編輯的表格文檔實現(xiàn)步驟
隨著云計算和團隊協(xié)作的興起,協(xié)同編輯成為了許多企業(yè)和組織中必不可少的需求,本文小編就將為大家介紹如何使用React+SpringBoot簡單的開發(fā)一個協(xié)同編輯的表格文檔,感興趣的朋友一起看看吧2023-11-11Docker部署SpringBoot項目到云服務器的實現(xiàn)步驟
Docker作為一種輕量級的容器化技術(shù),為開發(fā)者提供了快速、便捷的部署方案,本文主要介紹了Docker部署SpringBoot項目到云服務器,具有一定的參考價值,感興趣的可以了解一下2024-01-01