react+antd upload实现图片宽高、视频宽高尺寸校验

图片宽高校验方法：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// 上传图片尺寸限制 const checkIconWH = (file: any) => {   return new Promise<void>(function (resolve, reject) {     const fileReader = new FileReader();     fileReader.onload = (e) => {       const image = new Image();       image.onload = function () {         if (image.width !== 512 && image.height !== 512) {           reject();         } else {           resolve();         }       };       image.onerror = reject;       image.src = e?.target?.result && isString(e?.target?.result) ? e?.target?.result : '';     };     fileReader.readAsDataURL(file);   }); };

　　

视频宽高校验方法：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// 上传mp4尺寸限制 const checkVideoWH = (file: any, width: number, height: number) => {   return new Promise<void>(function (resolve, reject) {     const url = URL.createObjectURL(file);     const video = document.createElement('video');     video.onloadedmetadata = () => {       URL.revokeObjectURL(url);       console.log(video.videoWidth, video.videoHeight)       if (video.videoWidth < width || video.videoHeight < height) {         reject()       } else {         resolve()       }     }     video.src = url;     video.load();   }); };

　　

校验使用（在上传之前的beforeUpload方法中使用）：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

/**    * 上传请求    * @param {object} file - 上传的文件    * @param {object} item - 上传的信息    * @param {string} type - 上传的类型    */   const upLoad = async (file: RcFile, item: PropsConfig, type?: string) => {     let canContinue = true;     //如果是icon，检测尺寸     if (item.type === 'icon') {       await checkIconWH(file)         .then(() => {           canContinue = true;         })         .catch(() => {           canContinue = false;           message.error('ICON需为512X512px，PNG格式的图片，请确认后重新上传');           return;         });     }     //如果是mp4，检测尺寸     if (item.type === 'mp4' && fileWidth && fileHeight) {       await checkVideoWH(file, fileWidth, fileHeight)         .then(() => {           canContinue = true;         })         .catch(() => {           canContinue = false;           message.error(fileCheckMsg || '文件校验失败');           return;         });     }     //如果是mp4且需要检测大小（fileSize单位是MB）     if (item.type === 'mp4' && fileSize) {       console.log(file, fileSize)       if (file.size / 1024 / 1024 > fileSize) {         canContinue = false;         message.error(fileCheckMsg || '文件校验失败');         return;       }       canContinue = true;     }     if (!canContinue) return; ……………省略剩余代码……………