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>