input[file]上传文件条件过滤

日常做文件上传时，会需要条件过滤掉一部分不符合条件
1.文件格式过滤
 

// 校验素材格式 files-文件  accept-接受格式string  
// accept: '.png,.jpg,.jpeg,.mp4,.mov,.mpeg,.avi'

    filterMaterialType(files, accept) {
      const reg = new RegExp(
        `\.[${accept.replace(/\,/g, '|').replace(/\./g, '')}]$`
      )

      const filterFiles = files.filter(file => {
        return reg.test(file.name)
      })
      console.log('校验素材格式', filterFiles)

      if (filterFiles.length !== files.length) {
        this.$message({
          type: 'warning',
          message: `不符合格式文件已自动过滤`
        })
      }

      return filterFiles
    },

2.数量

// 校验素材数量  limit - 限制一次上传数目
    filterMaterialLimit(files, limit) {
      if (files.length > limit) {
        this.$message({
          type: 'warning',
          message: `当前文件数量过多，仅支持最多${limit}个文件，已自动过滤超过限制的文件`
        })
      }
      return files.slice(0, limit)
    },

3.尺寸过滤

// 条件尺寸过滤文件
    async filterMaterialSize(files) {
      const pArr = []
      for (let i = 0; i < files.length; i++) {
        const file = files[i]
        pArr.push(this.setMaterialSize(file))
      }
      return Promise.all(pArr).then(() => {
        const filterFiles = cloneDeep(files).filter(file => {
          if (file.mtype === 'video') {
            return this.filterQcVideoSize(file.width, file.height, file.size)
          } else if (file.mtype === 'image') {
            return this.filterQcImgSize(file.width, file.height, file.size)
          }
        })
        if (filterFiles.length !== files.length) {
          this.$message({
            type: 'warning',
            message: `不符尺寸文件已自动过滤`
          })
        }
        return filterFiles
      })
    },
    // 获取素材尺寸
    setMaterialSize(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = e => {
          if (file.type.includes('image/')) {
            let image = new Image()
            image.src = e.target.result
            image.onload = function(event) {
              file.width = event.target.width
              file.height = event.target.height
              file.mtype = 'image'
              resolve(file)
            }
          } else if (file.type.includes('video/')) {
            const videoUrl = URL.createObjectURL(file)
            const videoObj = document.createElement('video')
            videoObj.preload = 'metadata'
            videoObj.src = videoUrl
            videoObj.onloadedmetadata = function(evt) {
              URL.revokeObjectURL(videoUrl)
              file.duration = Math.round(videoObj.duration) // 视频的时长
              file.width = videoObj.videoWidth
              file.height = videoObj.videoHeight
              file.mtype = 'video'
              resolve(file)
            }
          }
        }
      })
    },

// 过滤不适用的尺寸的图
  filterQcImgSize(w, h, size)  {
    console.log(Math.round((w / h) * 100) / 100, '图片宽高比')
    if (
      Math.round((w / h) * 100) / 100 === 1.52 &&
      size / 1024 / 1024 <= 1.5 &&
      456 <= w &&
      w <= 1368 &&
      300 <= h &&
      h <= 900
    ) {
      return 'SMALL'
    } else if (
      Math.round((w / h) * 100) / 100 === 1.78 &&
      size / 1024 / 1024 <= 1.5 &&
      1280 <= w &&
      w <= 2560 &&
      720 <= h &&
      h <= 1440
    ) {
      return 'LARGE'
    } else if (
      Math.round((w / h) * 100) / 100 === 0.56 &&
      size / 1024 / 1024 <= 1.5 &&
      720 <= w &&
      w <= 1440 &&
      1280 <= h &&
      h <= 2560
    ) {
      return 'LARGE_VERTICAL'
    } else if (
      Math.round((w / h) * 100) / 100 === 0.56 &&
      1080 <= w &&
      w <= 2160 &&
      1920 <= h &&
      h <= 3840
    ) {
      return 'UNION_SPLASH'
    } else {
      return ''
    }
  },
  // 过滤不适用的尺寸的视频
  filterQcVideoSize(w, h, size) {
    if (
      Math.round((w / h) * 100) / 100 === 1.78 &&
      size / 1024 / 1024 <= 1000 &&
      1280 <= w &&
      w <= 2560 &&
      720 <= h &&
      h <= 1440
    ) {
      console.log(Math.round((w / h) * 100) / 100, size / 1024 / 1024, w, h)
      return 'VIDEO_LARGE'
    } else if (
      720 <= w &&
      w <= 1440 &&
      1280 <= h &&
      h <= 2560 &&
      Math.round((w / h) * 100) / 100 === 0.56 &&
      size / 1024 / 1024 <= 1000
    ) {
      console.log(Math.round((w / h) * 100) / 100, size / 1024 / 1024, w, h)
      return 'VIDEO_VERTICAL'
    } else {
      return ''
    }
  },

然后上传过程中过滤：
 

// 处理本地素材上传
    async handleFileChange(e) {
      let files = Array.prototype.slice.call(e.target.files)
      this.loading = true
      // 素材过滤
      files = this.filterMaterialType(files, this.localAccept)
      files = this.filterMaterialLimit(files, this.limit)
      files = await this.filterMaterialSize(files)

      if (!files.length) {
        this.$refs.localFileInput.value = null
        this.loading = false
        return
      }
      let proList = []
      try {
        files.forEach(file => {
          proList.push(
            new Promise(reslove => {
              // 上传
              uploadByPieces({
                $http: this.$http,
                file: file,
                progress: () => {},
                success: data => {
                  this.loading = false
                  reslove(data)
                  return data
                },
                error: err => {
                  this.$message.error('上传失败')
                  this.loading = false
                }
              })
            })
          )
        })
      } catch {
        this.$message.error('上传失败，请重新上传')
      }
      Promise.all(proList)
        .then(vals => {
          console.log('上传成功！！！！', vals)
          // .....数据操作
        })
        .catch(err => {
          this.$message.error('上传失败，请重新上传')
        })
        .finally(() => {
          // 清空input[file] value
          this.$refs.localFileInput.value = null
          this.loading = false
        })
    },