antd 图片或视频上传到oss之前做校验

最新推荐文章于 2024-05-28 11:11:05 发布

r_rebirth

最新推荐文章于 2024-05-28 11:11:05 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： react antd upload

本文链接：https://blog.youkuaiyun.com/r_rebirth/article/details/88846847

本文介绍了一个文件上传前的验证方法，确保只有符合特定尺寸和格式要求的图片或视频才能被上传。该验证包括检查文件类型是否为图片（JPEG、PNG）或视频（MP4），以及图片和视频的宽高比是否符合预设标准。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

beforeUpload = (file: any):any => {
    const imgTypeCheck : boolean = /(.jpg|.jpeg|.png)$/.test(file.type);
    const videoTypeCheck: boolean = /(.mp4)$/.test(file.type);
    const imgCheck = /image/.test(file.type);
    const videoCheck = /video/.test(file.type);
    if(!imgCheck && !videoCheck) {
        message.error("只能上传图片或视频");
        return false;
    } else {
      const {screenType} = this.state;
      return new (Promise as any)((resolve: any,reject: any) => {
          if(imgTypeCheck) {
            const filereader = new FileReader();
            filereader.onload = (e: any)=> {
                const src = e.target.result;
                const image = new Image();
                image.onload = () => {
                  const w = image.width;
                  const h = image.height;

                  const key = screenType === 'HORIZONTAL' ? Number((h / w).toFixed(4)) ===  0.5625 :  Number((w / h).toFixed(4)) ===  0.5625
                  if(key) {
                    resolve('上传到oss上的方法');
                  } else {
                    message.error("图片宽高不符合规则");
                    reject()
                  }
                };
                image.onerror = reject;
                image.src = src;
            };
            return filereader.readAsDataURL(file)
          } else {
            if(imgCheck) {
              message.error("图片上传类型jpg,jpeg和png")
              reject()
            } {
              resolve()
            }          
          }
      }).then(()=>{
        if(videoTypeCheck) {
          let filereader = new FileReader();
          return new Promise((resolve,reject)=>{
            filereader.onload = (e: any) => {
              const src = e.target.result;
              const video = document.createElement('video');
              video.src = src;
              video.addEventListener('loadeddata', () => {
                const w = video.videoWidth;
                const h = video.videoHeight;
                const key = screenType === 'HORIZONTAL' ? Number((h / w).toFixed(4)) ===  0.5625 :  Number((w / h).toFixed(4)) ===  0.5625;
                if(key) {
                  resolve('上传到oss上的方法');
                } else {
                  message.error("视频宽高不符合规则");
                  reject()
                }
             }, false);
              video.onerror = reject;
          };
            filereader.readAsDataURL(file);
          })
        } else {
          if(videoCheck) {
            message.error("视频上传类型只能为mp4")
            return Promise.reject()
          } else {
            return Promise.resolve()
          } 
        }
      })
    }
  }